@font-face { font-family: "Young Serif"; src: url(young-serif-400.6ba68b9927.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url(figtree-400.8f98dd6429.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url(figtree-700.7ec4f08d09.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --kalk: #F6F4EE; --kalk-2: #ECE8DD; --kalk-3: #DCD6C7; --blaek: #1C2233; --blaek-2: #4A5168; --rod: #B8202E; --rod-mork: #8E1622; --gran: #1E4A39; --gran-mork: #163A2C; --gran-lys: #2F6B52; --messing: #8A6420; --messing-lys: #D9B562; --aften: #112242; --aften-2: #1A2D52; --aften-3: #2A3E66; --nat-tekst: #C9CFDD; --side: var(--kalk); --flade: var(--kalk-2); --kant: var(--kalk-3); --tekst: var(--blaek); --tekst-2: var(--blaek-2); --link: var(--rod); --accent: var(--messing); --knap: var(--rod); --knap-tekst: #FFFFFF; --loefte: var(--gran); --serif: "Young Serif", Georgia, "Times New Roman", serif; --sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif; --maal: 40rem; --bred: 64rem; --gutter: 1rem; --r-lille: 8px; --r-mellem: 14px; --r-stor: 24px; --skygge-papir: 0 1px 0 rgba(28, 34, 51, .06), 0 6px 14px -6px rgba(28, 34, 51, .28); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --side: #1A1920; --flade: #24222B; --kant: #3A3743; --tekst: #F1EEE6; --tekst-2: #BDBAC6; --link: #F08A92; --accent: var(--messing-lys); --knap: #C8303D; --loefte: #8FC7A8; --skygge-papir: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 18px -8px rgba(0, 0, 0, .6); color-scheme: dark; } } :root[data-theme="dark"] { --side: #1A1920; --flade: #24222B; --kant: #3A3743; --tekst: #F1EEE6; --tekst-2: #BDBAC6; --link: #F08A92; --accent: var(--messing-lys); --knap: #C8303D; --loefte: #8FC7A8; --skygge-papir: 0 1px 0 rgba(0, 0, 0, .3), 0 8px 18px -8px rgba(0, 0, 0, .6); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--side); color: var(--tekst); font: 400 1.125rem/1.55 var(--sans); font-variant-numeric: lining-nums; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1 0 auto; } img, svg { max-width: 100%; } picture { display: block; } picture img { display: block; width: 100%; height: auto; } [hidden] { display: none !important; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.25rem, 1.6rem + 3vw, 3.5rem); } h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); margin-top: 2.2em; } h3 { font-size: 1.35rem; margin-top: 1.8em; } p, ul, ol, dl, table { margin: 0 0 1em; } ul, ol { padding-left: 1.3em; } li + li { margin-top: .35em; } a { color: var(--link); text-decoration-thickness: .08em; text-underline-offset: .18em; } a:hover { text-decoration-thickness: .14em; } strong { font-weight: 700; } :focus-visible { outline: 3px solid var(--messing-lys); outline-offset: 3px; border-radius: 4px; } .spring { position: absolute; left: .5rem; top: -4rem; background: var(--blaek); color: #fff; padding: .6rem 1rem; border-radius: var(--r-lille); z-index: 50; } .spring:focus { top: .5rem; } .sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ramme { width: 100%; max-width: var(--bred); margin: 0 auto; padding: 0 max(var(--gutter), env(safe-area-inset-left)) 0 max(var(--gutter), env(safe-area-inset-right)); } .tekst { max-width: var(--maal); } .top { background: var(--aften); color: var(--kalk); position: relative; z-index: 2; } .top .ramme { display: flex; align-items: center; gap: .25rem 1.25rem; min-height: 3.5rem; flex-wrap: wrap; } .logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--kalk); text-decoration: none; font-family: var(--serif); font-size: 1.3rem; line-height: 1; padding: .55rem 0; } .logo .hjerte { width: 1.9rem; height: auto; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); } .logo:hover .hjerte { transform: rotate(-10deg) scale(1.08); } .top nav { margin-left: auto; display: flex; gap: .4rem; align-items: center; } .top nav a, .nav-kommer { display: inline-flex; align-items: baseline; gap: .35em; white-space: nowrap; font-size: 1rem; padding: .4rem .7rem; border-radius: 999px; } .top nav a { color: var(--kalk); text-decoration: none; font-weight: 700; } .top nav a:hover { background: var(--aften-2); } .top nav a[aria-current="page"] { background: var(--aften-2); box-shadow: inset 0 0 0 1.5px var(--messing-lys); } .nav-kommer { color: #9AA4BE; } .nav-kommer small { font-size: .8rem; color: var(--messing-lys); } .top nav .soevn-chip { padding: .3rem .7rem; background: var(--aften-2); color: var(--messing-lys); font-weight: 400; font-size: .95rem; } .soevn-chip b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--kalk); } .forside .top nav .soevn-chip { display: none; } @media (max-width: 44rem) { .top nav { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) .55rem; overflow-x: auto; scrollbar-width: none; } .top nav::-webkit-scrollbar { display: none; } .top nav a, .nav-kommer { background: var(--aften-2); } } .hyldepapir { height: 26px; background: var(--rod); position: relative; z-index: 1; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='26'%3E%3Cpath fill-rule='evenodd' d='M0 0h32v10a16 16 0 0 1-32 0zM16 19.6l-3.3-3.2a1.9 1.9 0 0 1 3.3-2.4 1.9 1.9 0 0 1 3.3 2.4zM9.3 5a1.3 1.3 0 1 0-2.6 0 1.3 1.3 0 1 0 2.6 0zM25.3 5a1.3 1.3 0 1 0-2.6 0 1.3 1.3 0 1 0 2.6 0z'/%3E%3C/svg%3E") 0 0 / 32px 26px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='26'%3E%3Cpath fill-rule='evenodd' d='M0 0h32v10a16 16 0 0 1-32 0zM16 19.6l-3.3-3.2a1.9 1.9 0 0 1 3.3-2.4 1.9 1.9 0 0 1 3.3 2.4zM9.3 5a1.3 1.3 0 1 0-2.6 0 1.3 1.3 0 1 0 2.6 0zM25.3 5a1.3 1.3 0 1 0-2.6 0 1.3 1.3 0 1 0 2.6 0z'/%3E%3C/svg%3E") 0 0 / 32px 26px repeat-x; } .top + .hyldepapir, .himmel + .hyldepapir { margin-top: -1px; } .himmel { position: relative; isolation: isolate; background: var(--aften); color: var(--kalk); text-align: center; padding: 1.25rem 0 0; overflow: hidden; } .himmel::before, .himmel::after { content: ""; position: absolute; left: -60px; right: -60px; bottom: 0; z-index: 0; pointer-events: none; will-change: transform; } .himmel::before { top: -220px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' fill='%23F6F4EE'%3E%3Ccircle cx='18' cy='30' r='1.4' opacity='.7'/%3E%3Ccircle cx='70' cy='110' r='1' opacity='.55'/%3E%3Ccircle cx='120' cy='20' r='1.6' opacity='.6'/%3E%3Ccircle cx='160' cy='150' r='1.2' opacity='.7'/%3E%3Ccircle cx='200' cy='70' r='1' opacity='.5'/%3E%3Ccircle cx='40' cy='190' r='1.3' opacity='.6'/%3E%3Ccircle cx='100' cy='170' r='.9' opacity='.45'/%3E%3C/svg%3E") 0 0 / 220px 220px; animation: sne 18s linear infinite; } .himmel::after { top: -340px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' fill='%23F6F4EE'%3E%3Ccircle cx='60' cy='40' r='2.4' opacity='.55'/%3E%3Ccircle cx='250' cy='120' r='2' opacity='.5'/%3E%3Ccircle cx='150' cy='260' r='2.6' opacity='.45'/%3E%3Ccircle cx='310' cy='300' r='1.8' opacity='.5'/%3E%3C/svg%3E") 0 0 / 340px 340px; animation: sne-stor 26s linear infinite; } @keyframes sne { to { transform: translate3d(-30px, 220px, 0); } } @keyframes sne-stor { to { transform: translate3d(40px, 340px, 0); } } .himmel > * { position: relative; z-index: 1; } .himmel > .maane, .himmel > .stjerner { position: absolute; height: auto; } .himmel .maane { top: 1rem; right: max(1rem, 7vw); width: clamp(38px, 4.6vw, 70px); } .himmel .stjerner { width: clamp(30px, 4.4vw, 64px); animation: blink-blidt 5s ease-in-out infinite alternate; } .himmel .stjerner--v { top: 1.5rem; left: max(1rem, 5vw); } .himmel .stjerner--h { top: 7rem; right: max(1.25rem, 4.5vw); animation-delay: -2.5s; } @keyframes blink-blidt { from { opacity: .5; } to { opacity: 1; } } .nedtaelling { margin: 0 auto; padding: .5rem 0 0; max-width: 34rem; } .nedtaelling .tal { display: block; font-family: var(--serif); font-size: clamp(6.25rem, 4.5rem + 13vw, 11.5rem); line-height: .9; color: var(--messing-lys); font-variant-numeric: tabular-nums; text-shadow: 0 0 46px rgba(217, 181, 98, .28); } .nedtaelling .tal.ord { font-size: clamp(4.5rem, 3rem + 9vw, 7.5rem); line-height: 1; } .nedtaelling .enhed { display: block; font-family: var(--serif); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); margin-top: .35rem; } .nedtaelling .detalje { display: block; margin: .7rem 0 0; color: var(--nat-tekst); font-size: 1.02rem; } .himmel .by { margin-top: clamp(.5rem, 3vw - 1.5rem, 1rem); } .himmel .by img { aspect-ratio: 1536 / 484; } @media (max-width: 40rem) { .himmel .by img { aspect-ratio: 1056 / 484; } } .velkomst { padding: 2.25rem 0 .5rem; } .velkomst h1 { margin-bottom: .3em; } .lead { font-size: 1.25rem; color: var(--tekst-2); max-width: 34rem; } .loefte { font-family: var(--serif); font-size: 1.3rem; color: var(--loefte); margin: 1.25rem 0 0; } .laager { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 2rem 0 3rem; } @media (min-width: 40rem) { .laager { grid-template-columns: 1fr 1fr; } } .laage { position: relative; border-radius: var(--r-mellem); } .laage h2 { margin: 0 0 .35rem; font-size: 1.5rem; } .laage p { margin: 0 0 .75rem; } .laage--aaben { grid-column: 1 / -1; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--gran); padding: 10px; box-shadow: var(--skygge-papir); } .laage-rum { --dor: 3.2rem; position: relative; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--kalk); color: var(--blaek); border-radius: 8px; padding: 1.4rem 1.4rem 1.4rem calc(var(--dor) + 1.4rem); box-shadow: inset 10px 10px 22px -10px rgba(28, 34, 51, .35); overflow: hidden; } .laage-rum h2 { color: var(--blaek); } .laage-rum p { color: var(--blaek-2); max-width: 30rem; } .laage-rum .knap--primaer { background: var(--rod); border-color: var(--rod); } .laage-rum .knap--primaer:hover { background: var(--rod-mork); border-color: var(--rod-mork); } .laage-gnist img { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); transform-origin: 60% 100%; } .laage--aaben:hover .laage-gnist img, .laage--aaben:focus-within .laage-gnist img { transform: translateX(-6px) rotate(-2deg); } @media (min-width: 34rem) { .laage-rum { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem 1.5rem; padding-bottom: .5rem; } .laage-tekst { padding-bottom: 1rem; align-self: center; } .laage-gnist { order: 2; width: clamp(9rem, 20vw, 12.5rem); } } @media (max-width: 33.99rem) { .laage-rum { --dor: 2.2rem; padding: 1.1rem 1.1rem 1.1rem calc(var(--dor) + 1rem); } .laage-gnist { float: right; width: 6.5rem; margin: -.25rem -.4rem .25rem .5rem; } .laage-tekst .knap { clear: both; } } .laage-dor { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 8px; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, linear-gradient(90deg, var(--gran-mork), #24573F 70%, #2A6048); clip-path: polygon(0 0, var(--dor) 7%, var(--dor) 93%, 0 100%); animation: laage-aabn 1.1s cubic-bezier(.55, 0, .25, 1) .35s backwards; } @keyframes laage-aabn { from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, var(--dor) 7%, var(--dor) 93%, 0 100%); } } .laage--lukket { background: radial-gradient(120% 90% at 85% 50%, #FBE7B0, var(--messing-lys) 45%, var(--messing) 100%); box-shadow: var(--skygge-papir); } .laage--lukket .dor { position: relative; height: 100%; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--gran); color: var(--kalk); border-radius: var(--r-mellem); padding: 1.25rem 1.9rem 1.25rem 1.25rem; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: start; transform-origin: left center; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), box-shadow .5s ease; } .laage--lukket .dor::before { content: ""; position: absolute; inset: 7px; border: 2px dashed rgba(246, 244, 238, .32); border-radius: 9px; pointer-events: none; } .laage--lukket .dor::after { content: ""; position: absolute; right: .95rem; top: 50%; width: .5rem; height: .5rem; border-radius: 50%; background: var(--messing-lys); box-shadow: inset -1px -1px 0 rgba(0, 0, 0, .25); } .laage--lukket:hover .dor { transform: perspective(1000px) rotateY(-11deg); box-shadow: 14px 0 22px -10px rgba(0, 0, 0, .45); } .laage--lukket .dato { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--messing-lys); margin: 0; text-align: center; } .laage--lukket .dato small { font-size: .9rem; color: #CFE3D8; display: block; margin-top: .3rem; font-family: var(--sans); } .laage--lukket h2 { font-size: 1.3rem; margin: .1rem 0 .3rem; } .laage--lukket p { font-size: 1rem; color: #DCE9E2; margin: 0; } .knap { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.3rem; border-radius: var(--r-lille); border: 2px solid transparent; font: 700 1.05rem/1.2 var(--sans); text-decoration: none; cursor: pointer; background: var(--flade); color: var(--tekst); border-color: var(--kant); transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; } .knap:active { transform: translateY(1px); } .knap--primaer { background: var(--knap); color: var(--knap-tekst); border-color: var(--knap); box-shadow: 0 3px 0 var(--rod-mork); } .knap--primaer:hover { background: var(--rod-mork); border-color: var(--rod-mork); } .knap--primaer:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--rod-mork); } .knap--stor { min-height: 3.75rem; font-size: 1.2rem; padding: .9rem 1.8rem; border-radius: var(--r-mellem); } .knap--lys { background: transparent; color: var(--kalk); border-color: rgba(246, 244, 238, .45); } .knap--lys:hover { border-color: var(--messing-lys); } .knap--lys[aria-pressed="false"] { opacity: .7; } .knap[disabled] { opacity: .5; cursor: not-allowed; } .sidehoved { padding: 1.75rem 0 1rem; } .sidehoved--gnist { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 1.5rem; } .sidehoved--gnist .gnist-billede { width: clamp(7rem, 14vw, 9.5rem); margin-bottom: -1.6rem; } @media (max-width: 40rem) { .sidehoved--gnist { grid-template-columns: 1fr; } .sidehoved--gnist .gnist-billede { display: none; } } .kruemmer { font-size: .95rem; color: var(--tekst-2); margin: 0 0 .75rem; } .kruemmer ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; } .kruemmer li + li { margin: 0; } .kruemmer li + li::before { content: "›"; margin: 0 .45em; color: var(--tekst-2); } .kruemmer a { color: var(--tekst-2); } .indledning { font-size: 1.2rem; color: var(--tekst-2); max-width: 36rem; margin-bottom: 0; } .artikel { padding: 1rem 0 3rem; } .artikel h2:first-child { margin-top: 0; } .artikel table { border-collapse: collapse; width: 100%; font-size: 1rem; } .artikel th, .artikel td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--kant); vertical-align: top; } .artikel th { font-weight: 700; } .artikel td:first-child { white-space: nowrap; width: 3rem; } .oejne { font-family: var(--serif); font-size: 1.3rem; color: var(--rod); } .note { color: var(--tekst-2); font-size: 1rem; } .trin { padding-left: 1.4em; } .trin li::marker { font-family: var(--serif); color: var(--rod); } details.faq { border-top: 1px solid var(--kant); padding: .2rem 0; } details.faq:last-of-type { border-bottom: 1px solid var(--kant); } details.faq summary { cursor: pointer; font-weight: 700; padding: .8rem 2rem .8rem 0; list-style: none; position: relative; } details.faq summary::-webkit-details-marker { display: none; } details.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .55rem; font-family: var(--serif); font-size: 1.5rem; color: var(--rod); } details.faq[open] summary::after { content: "–"; } details.faq p { margin: 0 0 1rem; } .kommer { list-style: none; padding: 0; } .kommer li { padding: .8rem 0; border-top: 1px solid var(--kant); } .kommer li:last-child { border-bottom: 1px solid var(--kant); } .kommer b { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; } .spillebord { --filt-tekst: #D7E4DC; --filt-tekst-2: #BCD1C5; --filt-linje: rgba(246, 244, 238, .18); position: relative; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, radial-gradient(120% 90% at 50% 25%, #25583F, var(--gran) 55%, #173B2D); color: var(--kalk); border-radius: var(--r-stor); padding: 1.25rem; margin: .5rem 0 3rem; box-shadow: inset 0 0 0 1px rgba(217, 181, 98, .4), inset 0 0 60px rgba(0, 0, 0, .28), var(--skygge-papir); } @media (min-width: 40rem) { .spillebord { padding: 2rem; } } .spillebord a { color: var(--messing-lys); } .spillebord :focus-visible { outline-color: var(--messing-lys); } .klar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--filt-linje); } .klar p { margin: 0; flex: 1 1 16rem; font-size: 1.1rem; color: var(--filt-tekst); } .klar strong { color: var(--kalk); } .opsaetning fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; } .opsaetning legend { font-family: var(--serif); font-size: 1.3rem; padding: 0; margin-bottom: .6rem; } .opsaetning .hjaelp { font-size: .95rem; color: var(--filt-tekst-2); margin: -.3rem 0 .7rem; } .varianter { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; } .valg { position: relative; display: block; cursor: pointer; } .valg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .valg > span { display: block; height: 100%; padding: .8rem .95rem; border-radius: var(--r-mellem); background: rgba(8, 28, 20, .34); border: 2px solid var(--filt-linje); transition: border-color .15s ease, background-color .15s ease, transform .2s ease, box-shadow .2s ease, color .15s ease; } .valg:hover > span { border-color: rgba(217, 181, 98, .65); } .valg > span > b { display: block; font-size: 1.08rem; } .valg > span > small { display: block; font-size: .95rem; color: var(--filt-tekst-2); margin-top: .2rem; line-height: 1.4; } .valg > input:checked + span { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--kalk); color: var(--blaek); border-color: var(--kalk); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55); transform: translateY(-2px) rotate(-.4deg); } .valg > input:checked + span > small { color: var(--blaek-2); } .valg > input:checked + span > b::after { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--rod); margin-left: .45em; vertical-align: .1em; } .valg > input:focus-visible + span { outline: 3px solid var(--messing-lys); outline-offset: 2px; } .raekke { display: flex; flex-wrap: wrap; gap: .6rem; } .raekke .valg > span { padding: .6rem 1rem; min-height: 3rem; display: flex; align-items: center; } .oejevalg { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; max-width: 24rem; } .oejevalg .valg > span { padding: .3rem; border-radius: 12px; } .oejevalg .mini { width: 100%; } .oejevalg .valg > input:checked + span { background: var(--rod); border-color: var(--messing-lys); transform: translateY(-2px); } .tal-felt { display: inline-flex; align-items: center; gap: .45rem; margin-right: .5rem; margin-top: .3rem; } .tal-felt input { width: 3.75rem; min-height: 3rem; padding: .4rem .6rem; font: 700 1.15rem var(--sans); color: var(--blaek); background: var(--kalk); border: 2px solid var(--filt-linje); border-radius: var(--r-lille); text-align: center; } .tjek { display: flex; align-items: flex-start; gap: .7rem; padding: .45rem 0; cursor: pointer; } .tjek input { width: 1.4rem; height: 1.4rem; margin: .15rem 0 0; accent-color: var(--rod); flex: none; } .fejl { color: #FFC2C6; font-weight: 700; margin: .5rem 0 0; } .terning { --pip: var(--rod); position: relative; display: block; aspect-ratio: 1; background: var(--kalk); border-radius: 18%; box-shadow: inset 0 -6px 0 rgba(28, 34, 51, .14), 0 10px 26px rgba(0, 0, 0, .35); } .terning i { position: absolute; width: 19%; aspect-ratio: 1; border-radius: 50%; background: var(--pip); transform: translate(-50%, -50%); visibility: hidden; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .18); } .terning i:nth-child(1) { left: 27%; top: 27%; } .terning i:nth-child(2) { left: 50%; top: 27%; } .terning i:nth-child(3) { left: 73%; top: 27%; } .terning i:nth-child(4) { left: 27%; top: 50%; } .terning i:nth-child(5) { left: 50%; top: 50%; } .terning i:nth-child(6) { left: 73%; top: 50%; } .terning i:nth-child(7) { left: 27%; top: 73%; } .terning i:nth-child(8) { left: 50%; top: 73%; } .terning i:nth-child(9) { left: 73%; top: 73%; } .terning[data-v="1"] i:nth-child(5), .terning[data-v="2"] i:nth-child(3), .terning[data-v="2"] i:nth-child(7), .terning[data-v="3"] i:nth-child(3), .terning[data-v="3"] i:nth-child(5), .terning[data-v="3"] i:nth-child(7), .terning[data-v="4"] i:nth-child(1), .terning[data-v="4"] i:nth-child(3), .terning[data-v="4"] i:nth-child(7), .terning[data-v="4"] i:nth-child(9), .terning[data-v="5"] i:nth-child(1), .terning[data-v="5"] i:nth-child(3), .terning[data-v="5"] i:nth-child(5), .terning[data-v="5"] i:nth-child(7), .terning[data-v="5"] i:nth-child(9), .terning[data-v="6"] i:nth-child(1), .terning[data-v="6"] i:nth-child(3), .terning[data-v="6"] i:nth-child(4), .terning[data-v="6"] i:nth-child(6), .terning[data-v="6"] i:nth-child(7), .terning[data-v="6"] i:nth-child(9) { visibility: visible; } .terning.mini { box-shadow: inset 0 -3px 0 rgba(28, 34, 51, .14); } .terning.mini i { box-shadow: none; } .terning.pakke-oeje { --pip: var(--rod); } .spil { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .spil-top { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; } .fase { margin: 0; font-family: var(--serif); font-size: 1.35rem; } .timer-status { margin: 0; display: inline-flex; align-items: center; gap: .5rem; color: var(--messing-lys); font-weight: 700; font-variant-numeric: tabular-nums; } .timer-status .stjerne { width: 1.1rem; height: 1.1rem; animation: blink 2.2s ease-in-out infinite; } @keyframes blink { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } } .kast { appearance: none; border: 0; background: radial-gradient(closest-side, rgba(217, 181, 98, .16), transparent); border-radius: var(--r-stor); width: 100%; min-height: min(44vh, 20rem); display: flex; align-items: center; justify-content: center; gap: 6%; cursor: pointer; color: inherit; padding: 1rem; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .kast .terning { width: min(58vw, 15rem); } .kast.to .terning { width: min(38vw, 12rem); } .kast[disabled] { cursor: default; } .kast.ruller .terning { animation: rul .55s cubic-bezier(.3, .7, .4, 1); } .kast.to.ruller .terning + .terning { animation-delay: .06s; } @keyframes rul { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(-28deg) scale(.84) translateY(-9%); } 60% { transform: rotate(16deg) scale(1.06) translateY(2%); } 82% { transform: rotate(-4deg) scale(.98); } 100% { transform: rotate(0) scale(1); } } .resultat { min-height: 4.5rem; margin: 0; } .resultat strong { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.6rem); line-height: 1.15; } .resultat span { display: block; color: var(--filt-tekst); margin-top: .3rem; } .resultat.pakke strong { color: var(--messing-lys); } .hint { color: var(--filt-tekst-2); font-size: .95rem; margin: 0; } .spil-knapper { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .spil-knapper .knap { min-height: 2.9rem; font-size: 1rem; padding: .55rem 1rem; } .pause-tekst { font-family: var(--serif); font-size: 2rem; color: var(--messing-lys); margin: 0; } .qr { display: none; } .slut { position: relative; text-align: center; padding: 1rem 0; } .slut .gnist-billede { width: 8.5rem; margin: 0 auto; } #slut-titel:focus { outline: none; } .slut h2 { margin: .5rem 0 .3rem; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); color: var(--messing-lys); } .slut p { color: var(--filt-tekst); } .slut .spil-knapper { margin-top: 1.25rem; } .konfetti { position: absolute; inset: -1.25rem -1.25rem auto; height: 26rem; overflow: hidden; pointer-events: none; } .slut > :not(.konfetti) { position: relative; z-index: 1; } .konfetti i { position: absolute; top: -2rem; left: var(--x); width: var(--s, 1rem); aspect-ratio: 1; background: var(--f, var(--rod)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 18 1.6 9.7A5 5 0 0 1 10 2.6a5 5 0 0 1 8.4 7.1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 18'%3E%3Cpath d='M10 18 1.6 9.7A5 5 0 0 1 10 2.6a5 5 0 0 1 8.4 7.1z'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; animation: hjerte-fald var(--t, 3.4s) cubic-bezier(.35, .2, .6, 1) var(--d, 0s) forwards; } .konfetti i:nth-child(3n) { --f: var(--kalk); } .konfetti i:nth-child(4n) { --f: var(--messing-lys); } .konfetti i:nth-child(1) { --x: 6%; --d: .05s; --s: 1.1rem; } .konfetti i:nth-child(2) { --x: 14%; --d: .5s; --t: 3s; } .konfetti i:nth-child(3) { --x: 22%; --d: .2s; --s: .8rem; } .konfetti i:nth-child(4) { --x: 31%; --d: .8s; --s: 1.2rem; } .konfetti i:nth-child(5) { --x: 39%; --d: .1s; --t: 3.8s; } .konfetti i:nth-child(6) { --x: 47%; --d: .65s; --s: .9rem; } .konfetti i:nth-child(7) { --x: 55%; --d: .3s; --s: 1.3rem; } .konfetti i:nth-child(8) { --x: 63%; --d: .9s; --t: 3s; } .konfetti i:nth-child(9) { --x: 71%; --d: .15s; --s: .8rem; } .konfetti i:nth-child(10) { --x: 79%; --d: .55s; --s: 1.1rem; } .konfetti i:nth-child(11) { --x: 87%; --d: .35s; --t: 3.6s; } .konfetti i:nth-child(12) { --x: 94%; --d: .75s; --s: .9rem; } @keyframes hjerte-fald { 0% { opacity: 0; transform: translateY(0) rotate(-20deg); } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(26rem) rotate(25deg); } } .spillebord:fullscreen, .spillebord.storskaerm { border-radius: 0; width: 100vw; height: 100vh; margin: 0; padding: 3vh 4vw; overflow: auto; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, radial-gradient(ellipse at 50% 35%, #2A6048, var(--gran) 55%, #12301F); } .spillebord.storskaerm { position: fixed; inset: 0; z-index: 40; } .spillebord:fullscreen .spil, .spillebord.storskaerm .spil { height: 100%; justify-content: space-between; } .spillebord:fullscreen .kast, .spillebord.storskaerm .kast { flex: 1; } .spillebord:fullscreen .kast .terning, .spillebord.storskaerm .kast .terning { width: min(42vh, 40vw); } .spillebord:fullscreen .kast.to .terning, .spillebord.storskaerm .kast.to .terning { width: min(36vh, 30vw); } .spillebord:fullscreen .resultat strong, .spillebord.storskaerm .resultat strong { font-size: min(7vh, 5vw); } .spillebord:fullscreen .fase, .spillebord.storskaerm .fase { font-size: min(4vh, 2.4rem); } @media (min-width: 48rem) { .spillebord:fullscreen .qr, .spillebord.storskaerm .qr { display: flex; position: absolute; right: 2vw; bottom: 2vh; align-items: center; gap: .75rem; background: var(--kalk); color: var(--blaek); border-radius: var(--r-mellem); padding: .6rem .9rem .6rem .6rem; font-weight: 700; font-size: 1rem; max-width: 22rem; text-align: left; } .qr b { display: block; white-space: nowrap; } .qr svg { width: 5.5rem; height: 5.5rem; flex: none; } } .fod { position: relative; background: var(--aften); color: var(--nat-tekst); padding: 3.75rem 0 calc(2.5rem + env(safe-area-inset-bottom)); margin-top: auto; font-size: 1rem; } .fod::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 30px; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--side); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='30'%3E%3Cpath d='M0 0h240v14c-18 10-38 12-58 6s-40-14-62-10-36 16-58 16S22 18 0 12z'/%3E%3C/svg%3E") 0 0 / 240px 30px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='30'%3E%3Cpath d='M0 0h240v14c-18 10-38 12-58 6s-40-14-62-10-36 16-58 16S22 18 0 12z'/%3E%3C/svg%3E") 0 0 / 240px 30px repeat-x; } .fod::after { content: ""; position: absolute; inset: 30px 0 0; pointer-events: none; background: radial-gradient(1.5px 1.5px at 8% 30%, var(--messing-lys) 50%, transparent 51%), radial-gradient(1px 1px at 34% 70%, var(--kalk) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 22%, var(--kalk) 50%, transparent 51%), radial-gradient(1px 1px at 81% 60%, var(--messing-lys) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 95% 18%, var(--kalk) 50%, transparent 51%); opacity: .8; } .fod .ramme { position: relative; z-index: 1; display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 44rem) { .fod .ramme { grid-template-columns: 1.4fr 1fr 1fr; } } .fod .hjerte { width: 2.4rem; height: auto; } .fod p { margin: .5rem 0 0; } .fod .loefte { font-size: 1.1rem; margin-top: .6rem; color: var(--messing-lys); } .fod h2 { font-family: var(--sans); font-weight: 700; font-size: 1rem; color: var(--kalk); margin: 0 0 .5rem; } .fod ul { list-style: none; padding: 0; margin: 0; } .fod li + li { margin-top: .3rem; } .fod a, .fod .linkknap { color: var(--kalk); } .fod .note { color: #9AA4BE; } .linkknap { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--tekst); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .18em; cursor: pointer; } .samtykke { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--side); color: var(--tekst); border-top: 3px solid var(--rod); padding: .9rem max(var(--gutter), env(safe-area-inset-left)) calc(.9rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(17, 34, 66, .18); display: grid; grid-template-columns: 1fr; gap: .25rem 1.5rem; animation: op .4s cubic-bezier(.2, .8, .3, 1); } @media (min-width: 48rem) { .samtykke { grid-template-columns: minmax(0, 44rem) auto; justify-content: center; align-items: center; } .samtykke .valgknapper { grid-column: 2; grid-row: 1 / span 2; } } @keyframes op { from { transform: translateY(100%); } } .samtykke h2 { font-size: 1.15rem; margin: 0; } .samtykke p { font-size: .95rem; margin: 0 0 .5rem; color: var(--tekst-2); } @media (min-width: 48rem) { .samtykke p { margin: 0; } } .samtykke .valgknapper { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; min-width: 15rem; } .samtykke .knap { width: 100%; min-height: 2.75rem; padding: .5rem 1rem; } .tabt { text-align: center; padding: 2.5rem 0 4rem; } .tabt .gnist-billede { width: 9rem; margin: 0 auto 1rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .himmel::before, .himmel::after { animation: none !important; } .konfetti { display: none; } } @media print { .top, .fod, .samtykke, .spillebord, .hyldepapir, .himmel::before, .himmel::after { display: none !important; } body { background: #fff; color: #000; } } .himmel-link { display: inline-block; margin-top: .9rem; color: var(--messing-lys); font-weight: 700; font-size: 1rem; } .laage--kort { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); box-shadow: var(--skygge-papir); padding: 1.25rem 1.4rem; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; } .laage--kort h2 { font-size: 1.45rem; } .laage--kort h2 a { color: var(--tekst); text-decoration: none; } .laage--kort h2 a:hover { text-decoration: underline; text-decoration-color: var(--rod); } .laage--kort p { color: var(--tekst-2); font-size: 1.02rem; } .laage--kort .knap { margin-top: auto; } .snart { font-size: .95rem !important; font-weight: 700; color: var(--blaek-2) !important; } .kommer--blok b { display: block; margin-bottom: .15rem; } .snart-boks { display: flex; gap: .9rem; align-items: flex-start; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); border: 1px dashed var(--accent); border-radius: var(--r-mellem); padding: .9rem 1rem; margin: 0 0 2rem; } .snart-boks .hjerte { width: 2rem; height: auto; flex: none; margin-top: .2rem; } .snart-boks p { margin: 0; font-size: 1rem; } .quizvalg { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; margin: .5rem 0 1.5rem; } .quizvalg-kort { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border-radius: var(--r-mellem); background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--gran); color: var(--kalk); text-decoration: none; border: 2px solid rgba(246, 244, 238, .18); box-shadow: var(--skygge-papir); } .quizvalg-kort:hover { border-color: var(--messing-lys); } .quizvalg-kort b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; } .quizvalg-kort span { font-size: .95rem; color: #D7E4DC; } .quiz { border-top: 2px solid var(--kant); padding: 1.75rem 0 1rem; scroll-margin-top: 1rem; } .quiz-hoved { max-width: var(--maal); } .quiz-hoved h2 { margin-top: 0; } .quiz-meta { font-weight: 700; color: var(--accent); margin-bottom: .5rem; } .quiz-knapper { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .5rem; } .spoergsmaal { max-width: var(--maal); padding-left: 1.6em; margin: 1rem 0; } .spoergsmaal > li { padding: .8rem 0; border-bottom: 1px solid var(--kant); } .spoergsmaal > li::marker { font-family: var(--serif); color: var(--rod); } .sp-tekst { font-weight: 700; margin: 0 0 .4rem; } .valgmuligheder { list-style: none; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; } .valgmuligheder li { margin: 0; } .bogstav { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; border-radius: 999px; background: var(--flade); border: 1px solid var(--kant); font-weight: 700; font-size: .9rem; margin-right: .25rem; } details.svar summary { cursor: pointer; color: var(--link); font-weight: 700; font-size: .98rem; width: max-content; padding: .2rem 0; } details.svar p { margin: .35rem 0 0; font-size: 1rem; background: var(--flade); border-radius: var(--r-lille); padding: .6rem .8rem; } .kilde { display: block; font-size: .9rem; color: var(--tekst-2); margin-top: .25rem; } .kilde a { color: var(--tekst-2); } .udskiller { max-width: var(--maal); background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); border-radius: var(--r-mellem); padding: 1rem 1.1rem; margin: .5rem 0 1rem; } .udskiller h3 { margin-top: 0; font-size: 1.2rem; } .hjaelpetekst { font-size: .95rem; color: var(--tekst-2); } .print-hoved, .print-fod, .facitark { display: none; } .panel { --filt-tekst: #D7E4DC; --filt-tekst-2: #BCD1C5; --filt-linje: rgba(246, 244, 238, .18); background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, radial-gradient(120% 90% at 50% 25%, #25583F, var(--gran) 55%, #173B2D); color: var(--kalk); border-radius: var(--r-stor); padding: 1.25rem; margin: .5rem 0 2rem; box-shadow: inset 0 0 0 1px rgba(217, 181, 98, .4), inset 0 0 60px rgba(0, 0, 0, .28), var(--skygge-papir); } @media (min-width: 40rem) { .panel { padding: 1.75rem 2rem; } } .panel-titel { margin: 0 0 1rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem); } .panel noscript p { color: var(--filt-tekst-2); } .filter fieldset { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; } .filter legend { font-weight: 700; font-size: 1rem; padding: 0; margin-bottom: .5rem; color: var(--filt-tekst); } .filter .raekke .valg > span { min-height: 2.75rem; padding: .45rem .9rem; font-size: 1rem; } .filter .tjek { padding-top: 0; } .filter-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; border-top: 1px solid var(--filt-linje); padding-top: 1rem; margin-top: .25rem; } .antal { margin: 0; font-family: var(--serif); font-size: 1.3rem; color: var(--messing-lys); flex: 1 1 12rem; } .dagens-ide { margin-top: 1.25rem; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--kalk); color: var(--blaek); border-radius: var(--r-mellem); padding: 1.1rem 1.2rem; border: 3px solid var(--messing-lys); } .dagens-ide:focus { outline: none; } .dagens-ide .ide-titel { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 .4rem; line-height: 1.2; } .dagens-ide p { margin: 0 0 .5rem; } .dagens-ide .ide-forside { font-size: .9rem; font-weight: 700; color: var(--rod); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .3rem; } .dagens-ide a { color: var(--rod); } .idegruppe { margin: 0 0 2.25rem; scroll-margin-top: 1rem; } .idegruppe > h2 { margin: 0 0 .4rem; } .gruppe-intro { color: var(--tekst-2); max-width: var(--maal); } .idekort-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .75rem; margin-top: .9rem; } .idekort-gitter--bred { grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); } .idekort { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); box-shadow: var(--skygge-papir); border-radius: var(--r-mellem); padding: 1rem 1.1rem; display: flex; flex-direction: column; scroll-margin-top: 1rem; } .idekort h3 { margin: 0 0 .4rem; font-size: 1.22rem; } .idekort p { margin: 0 0 .6rem; font-size: 1.02rem; } .idekort .materialer, .idekort .sikkerhed { font-size: .95rem; color: var(--tekst-2); } .idekort .sikkerhed { border-left: 3px solid var(--rod); padding-left: .6rem; } .idekort.valgt { outline: 3px solid var(--messing-lys); outline-offset: 2px; } .maerker { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: .3rem; } .maerker li { margin: 0; font-size: .82rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--side); border: 1px solid var(--kant); color: var(--tekst-2); } .maerker .maerke-rod { color: var(--accent); } .ingen { font-weight: 700; padding: 1rem 0; } .legegruppe { margin: 1rem 0 2.5rem; scroll-margin-top: 1rem; } .legegruppe > h2 { margin: 0 0 .4rem; } .leg .fakta { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .6rem; font-size: .95rem; } .leg .fakta div { display: flex; gap: .3rem; } .leg .fakta dt { font-weight: 700; } .leg .fakta dd { margin: 0; color: var(--tekst-2); } .leg .trin { font-size: 1rem; margin-bottom: .6rem; } .leg-link { margin-top: auto !important; font-weight: 700; } .himmel--side { padding: 2rem 0 0; text-align: center; } .nedtaelling--side { padding-bottom: .5rem; } .taeller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; max-width: 30rem; margin: 1rem auto 0; } .taeller div { background: var(--aften-2); border-radius: var(--r-mellem); padding: .6rem .25rem; } .taeller b { display: block; font-family: var(--sans); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.2rem); color: var(--kalk); font-variant-numeric: tabular-nums; line-height: 1.15; } .taeller span { font-size: .85rem; color: #C9CFDD; } .himmel--side .detalje { color: #C9CFDD; margin: .9rem 0 0; } .himmel--side .taeller-titel { color: #C9CFDD; margin: 1.25rem 0 0; font-size: 1rem; } .noegletal { list-style: none; padding: 0; margin: 1.25rem auto 0; padding-bottom: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; color: #D5DAE6; } .noegletal li { margin: 0; } .noegletal b { color: var(--messing-lys); } .artikel .datotabel td:first-child { white-space: normal; width: auto; } .datotabel th[scope="row"] { font-weight: 700; } .datotabel tr.fremhaev th, .datotabel tr.fremhaev td { background: var(--flade); } .datotabel td[data-om] { color: var(--tekst-2); white-space: nowrap; } @media print { @page { margin: 14mm; } body { font-size: 11pt; } a { color: inherit; text-decoration: none; } .quizvalg, .quiz-knapper, details.svar > summary, .panel, .snart-boks { display: none !important; } .quiz { border: 0; padding: 0; break-before: page; } .quiz:first-of-type { break-before: auto; } .spoergsmaal > li { break-inside: avoid; padding: .35rem 0; } .print-hoved, .print-fod { display: block !important; } .print-hoved { border: 1px solid #000; border-radius: 6px; padding: .5rem .7rem; } .print-fod { font-size: 9pt; color: #555; margin-top: 1rem; } .facitark { display: block !important; break-before: page; } .facit-titel { font-family: var(--serif); font-size: 16pt; margin: 0 0 .5rem; } .facitark ol { columns: 2; } html[data-print] .sidehoved, html[data-print] .hyldepapir, html[data-print] .artikel, html[data-print] .note { display: none !important; } html[data-print] .quiz:not(.printes) { display: none !important; } html[data-print] .quiz.printes { break-before: auto; } html[data-print="ark"] .facitark, html[data-print="ark"] details.svar { display: none !important; } html[data-print="facit"] .spoergsmaal, html[data-print="facit"] .udskiller, html[data-print="facit"] .print-hoved, html[data-print="facit"] .quiz-hoved { display: none !important; } html[data-print="facit"] .facitark { break-before: auto; } html[data-print="facit"] .facitark ol { columns: 1; } } .quizpanel .panel-intro { color: var(--filt-tekst); max-width: 40rem; font-size: 1.02rem; margin: -.4rem 0 1.1rem; } .quizform .raekke .valg > span { min-height: 2.75rem; } .quiz--egen { border-top-color: var(--accent); } .quiz--egen:focus { outline: none; } .quiz--egen .quiz-meta { color: var(--rod); } .spoergsmaal .sp-tema { display: block; font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-2); margin-bottom: .1rem; } .vaert { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; gap: 1rem; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, radial-gradient(120% 90% at 50% 15%, var(--aften-2), var(--aften) 60%); color: var(--kalk); overflow-y: auto; overscroll-behavior: contain; } .vaert :focus-visible { outline-color: var(--messing-lys); } .vaert-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; } .vaert-tael { margin: 0; font-weight: 700; color: var(--messing-lys); font-size: 1rem; } .vaert-top-knapper { display: flex; gap: .5rem; } .vaert-top-knapper .knap { min-height: 2.6rem; padding: .4rem .9rem; font-size: .95rem; } .vaert-kort { flex: 1; width: 100%; max-width: 52rem; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; } .vaert-kort:focus { outline: none; } .vaert-tema { margin: 0 0 .5rem; font-size: .9rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nat-tekst); } .vaert-tekst { font-family: var(--serif); font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.8rem); line-height: 1.2; margin: 0 0 1.25rem; text-wrap: balance; } .vaert-valg { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .vaert-valg li { margin: 0; display: flex; align-items: center; gap: .8rem; padding: .75rem 1rem; border-radius: var(--r-mellem); background: rgba(246, 244, 238, .08); border: 2px solid rgba(246, 244, 238, .18); font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem); transition: opacity .2s ease, border-color .2s ease, background-color .2s ease; } .vaert-valg .bogstav { background: var(--kalk); color: var(--blaek); border: 0; min-width: 2.2rem; height: 2.2rem; font-size: 1.05rem; flex: none; } .vaert.vist .vaert-valg li { opacity: .45; } .vaert.vist .vaert-valg li.rigtigt { opacity: 1; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--kalk); color: var(--blaek); border-color: var(--messing-lys); } .vaert.vist .vaert-valg li.rigtigt .bogstav { background: var(--gran); color: var(--kalk); } .vaert-svar { margin-top: 1.1rem; background: rgba(8, 18, 40, .45); border-radius: var(--r-mellem); padding: .9rem 1.1rem; font-size: clamp(1rem, .95rem + .4vw, 1.25rem); } .vaert-svar p { margin: 0; } .vaert-svar .kilde { color: var(--nat-tekst); } .vaert-svar .kilde a { color: var(--nat-tekst); } .vaert-svar .vaert-tal { font-family: var(--serif); font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem); color: var(--messing-lys); line-height: 1; margin-bottom: .4rem; } .vaert-bund { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; width: 100%; max-width: 52rem; margin: 0 auto; } .vaert-bund [data-vaert-vis] { flex: 1 1 14rem; max-width: 26rem; } .vaert-hjaelp { margin: 0; text-align: center; font-size: .85rem; color: var(--nat-tekst); } @media (hover: none) { .vaert-hjaelp { display: none; } } .vaert-slut { text-align: center; } .vaert-slut .vaert-tekst { margin-bottom: .6rem; } .vaert-slut p { color: var(--nat-tekst); } .vaert:fullscreen, .vaert.storskaerm { padding: 2.5vh 4vw; } .vaert:fullscreen .vaert-kort, .vaert.storskaerm .vaert-kort { max-width: 80rem; } .vaert:fullscreen .vaert-tekst, .vaert.storskaerm .vaert-tekst { font-size: clamp(2rem, 1rem + 3.6vw, 4.6rem); } .vaert:fullscreen .vaert-valg li, .vaert.storskaerm .vaert-valg li { font-size: clamp(1.4rem, .9rem + 1.8vw, 2.6rem); padding: 1rem 1.4rem; } .vaert:fullscreen .vaert-bund, .vaert.storskaerm .vaert-bund { max-width: 80rem; } @media (min-width: 48rem) { .vaert-valg { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vaert-valg li { flex-direction: column; align-items: flex-start; } } html.vaert-aaben { overflow: hidden; } @media print { .vaert, .quiz--egen [data-egen-tekst], .quiz--egen [data-egen-status] { display: none !important; } .spoergsmaal .sp-tema { display: none; } } .planpanel .panel-intro { color: var(--filt-tekst); max-width: 42rem; font-size: 1.02rem; margin: -.4rem 0 1.1rem; } .planform .hjaelp { font-size: .92rem; color: var(--filt-tekst-2); margin: .45rem 0 0; } .planform .tjekliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 0 1.25rem; margin: 0 0 .9rem; } .planform .tjek { padding: .35rem 0; color: var(--filt-tekst); font-size: 1rem; } .knap--lille { min-height: 2.5rem; padding: .35rem .85rem; font-size: .95rem; border-radius: var(--r-lille); } .nisseplan { margin: 0 0 2.5rem; scroll-margin-top: 1rem; } .nisseplan:focus { outline: none; } .plan-hoved { max-width: 46rem; } .plan-hoved h2 { margin-top: .5rem; } .plan-meta { font-weight: 700; color: var(--accent); margin-bottom: .6rem; } .plan-intro { color: var(--tekst-2); font-size: 1.02rem; } .plan-iaften { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--kalk); color: var(--blaek); border-left: 4px solid var(--rod); border-radius: var(--r-lille); padding: .6rem .9rem; box-shadow: var(--skygge-papir); } .plan-iaften a { color: var(--rod); font-weight: 700; } .plan-knapper { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 .4rem; } .plan-knapper .knap { min-height: 2.75rem; padding: .5rem 1rem; font-size: 1rem; } .plan-status { min-height: 1.4em; font-weight: 700; color: var(--accent); margin: .3rem 0 .8rem; } .plandage { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: .75rem; } .plandage > li { margin: 0; } .plandag { display: grid; grid-template-columns: 3.4rem 1fr; gap: .2rem .9rem; align-content: start; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); box-shadow: var(--skygge-papir); border-radius: var(--r-mellem); padding: .9rem 1rem .8rem; border: 2px solid transparent; scroll-margin-top: 1rem; } .plandag.weekend { border-color: color-mix(in srgb, var(--gran-lys) 55%, transparent); } .plandag.laast { border-color: var(--messing-lys); } .plandag.fri { opacity: .78; } .plandag-dato { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: .1rem; } .plandag-dato b { font-family: var(--serif); font-weight: 400; font-size: 2.1rem; line-height: 1; color: var(--rod); } .plandag-dato span { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-2); margin-top: .2rem; } .plandag.weekend .plandag-dato span { color: var(--gran-lys); } .plandag-indhold h3 { margin: 0 0 .25rem; font-size: 1.2rem; } .plandag-indhold p { margin: 0 0 .45rem; font-size: 1rem; } .plandag-forbered { font-size: .88rem !important; font-weight: 700; color: var(--accent); } .plandag .materialer, .plandag .sikkerhed { font-size: .92rem !important; color: var(--tekst-2); } .plandag .sikkerhed { border-left: 3px solid var(--rod); padding-left: .55rem; } .plandag-knapper { grid-column: 2; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; } .plandag-knapper .knap[aria-pressed="true"] { background: var(--messing-lys); border-color: var(--messing-lys); color: var(--blaek); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plandag.weekend .plandag-dato span { color: #8FC7A8; } } :root[data-theme="dark"] .plandag.weekend .plandag-dato span { color: #8FC7A8; } .indkoeb { max-width: 46rem; margin-top: 2rem; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); box-shadow: var(--skygge-papir); border-radius: var(--r-mellem); padding: 1.1rem 1.2rem .6rem; } .indkoeb h3 { margin-top: 0; } .indkoebsliste { list-style: none; padding: 0; columns: 2 14rem; column-gap: 2rem; } .indkoebsliste li { break-inside: avoid; display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .45rem; } .indkoebsliste .afkryds { flex: none; width: .95rem; height: .95rem; border: 2px solid var(--tekst-2); border-radius: 3px; transform: translateY(.12rem); } .indkoebsliste small { color: var(--tekst-2); } .nisseplan .print-fod { display: none; } @media print { html[data-print] .ideer, html[data-print] #plan, html[data-print] #find { display: none !important; } html[data-print] .nisseplan { margin: 0; } .plan-knapper, .plandag-knapper, .plan-status, .plan-intro, .plan-iaften { display: none !important; } .nisseplan .print-fod { display: block !important; font-size: 9pt; color: #555; margin-top: 1rem; } .plandage { display: block; columns: 2; column-gap: 8mm; } .plandag { break-inside: avoid; box-shadow: none; background: #fff; border: 1px solid #999 !important; border-radius: 6px; padding: 2.5mm 3mm; margin: 0 0 3mm; grid-template-columns: 11mm 1fr; opacity: 1; } .plandag.weekend { border-width: 2px !important; } .plandag-dato b { font-size: 18pt; color: #000; } .plandag-indhold h3 { font-size: 11.5pt; } .plandag-indhold p, .plandag .materialer, .plandag .sikkerhed { font-size: 9pt !important; color: #000; } .plandag-forbered { color: #555 !important; } .indkoeb { box-shadow: none; background: #fff; border: 1px solid #999; break-before: page; } html[data-print="indkoeb"] .plan-hoved > :not(h2):not(.plan-meta), html[data-print="indkoeb"] .plandage { display: none !important; } html[data-print="indkoeb"] .indkoeb { break-before: auto; border: 0; padding: 0; } .indkoebsliste .afkryds { border-color: #000; } } .flere-valg { margin-top: 1rem; border-top: 1px solid var(--filt-linje); } .flere-valg > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .5rem 0; font-weight: 700; color: var(--filt-tekst); } .flere-valg > summary::-webkit-details-marker { display: none; } .flere-valg > summary::before { content: "+"; font-family: var(--serif); font-size: 1.4rem; line-height: 1; color: var(--messing-lys); width: 1rem; } .flere-valg[open] > summary::before { content: "–"; } .flere-valg[open] > summary { margin-bottom: .6rem; } .flere-valg > summary:focus-visible { outline: 3px solid var(--messing-lys); outline-offset: 3px; border-radius: var(--r-lille); } .planform > .filter-resultat, .quizform > .filter-resultat { border-top: 0; padding-top: 0; margin-top: 0; } .quizvalg-titel { margin: 2.25rem 0 .75rem; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.6rem); } @media print { .flere-valg, .quizvalg-titel { display: none !important; } } .printhjoerne { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 1rem; } .printhjoerne .gnist-saks { width: 6rem; margin-bottom: .2rem; } @media (max-width: 40rem) { .printhjoerne { grid-template-columns: 1fr; } .printhjoerne .gnist-saks { display: none; } } @media print { .printhjoerne .gnist-saks { display: none !important; } } .dagens { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 1.25rem 0 0; } .dagens:empty { display: none; } @media (min-width: 48rem) { .dagens:has(.dagkort + .dagkort) { grid-template-columns: 1fr 1fr; align-items: start; } } .dagkort { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); box-shadow: var(--skygge-papir); border-radius: var(--r-mellem); border-top: 5px solid var(--rod); padding: 1rem 1.15rem 1.1rem; min-height: 19rem; } .dagkort--drilleri { border-top-color: var(--gran-lys); min-height: 20rem; } .dagens[data-svaret] [data-dagens-quiz] { min-height: 33rem; } @media (max-width: 47.99rem) { .dagkort--drilleri { min-height: 26rem; } } .dagkort h2 { margin: 0 0 .5rem; font-size: clamp(1.35rem, 1.2rem + .6vw, 1.6rem); } .dagkort h3 { margin: .2rem 0 .35rem; font-size: 1.2rem; } .dagkort p { margin: 0 0 .6rem; } .dagkort-top { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .88rem !important; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem !important; } .dagkort-spm { font-size: 1.15rem; font-weight: 700; } .dagkort-valg { display: grid; gap: .5rem; margin: .4rem 0 .2rem; } .dagkort-svarknap { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 3rem; padding: .45rem .8rem; text-align: left; font: inherit; font-size: 1.05rem; color: var(--tekst); background: var(--side); border: 2px solid var(--kant); border-radius: var(--r-lille); cursor: pointer; } .dagkort-svarknap:hover:not([disabled]) { border-color: var(--rod); } .dagkort-svarknap:focus-visible { outline: 3px solid var(--messing-lys); outline-offset: 2px; } .dagkort-svarknap[disabled] { cursor: default; opacity: .65; } .dagkort-svarknap .bogstav { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--kant); font-weight: 700; font-size: .95rem; } .dagkort-svarknap.rigtigt { opacity: 1; border-color: var(--gran-lys); background: color-mix(in srgb, var(--gran-lys) 14%, var(--side)); } .dagkort-svarknap.rigtigt .bogstav { background: var(--gran); color: var(--kalk); } .dagkort-svarknap.forkert { opacity: 1; border-color: var(--rod); } .dagkort-svarknap.forkert .bogstav { background: var(--rod); color: #fff; } .dagkort-svar { margin-top: .8rem; } .dagkort-dom { font-family: var(--serif); font-size: 1.3rem; margin-bottom: .35rem !important; } .dagkort-dom:focus { outline: none; } .dagkort-kilde, .dagkort-imorgen { font-size: .92rem; color: var(--tekst-2); } .dagkort-streak { font-weight: 700; color: var(--accent); } .dagkort-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .3rem 0 .2rem; } .dagkort-status { min-height: 1.2em; font-size: .95rem; font-weight: 700; color: var(--accent); margin-bottom: .3rem !important; } .dagkort-aldre { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .7rem; } .dagkort-aldre .knap[aria-pressed="true"] { background: var(--gran); border-color: var(--gran); color: var(--kalk); } .dagkort-fraplan { font-weight: 700; color: var(--loefte); } .dagkort .materialer, .dagkort .sikkerhed { font-size: .95rem; color: var(--tekst-2); } .dagkort .sikkerhed { border-left: 3px solid var(--rod); padding-left: .6rem; } @media print { .dagens { display: none !important; } } .widget-vis { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--kalk); border-radius: var(--r-mellem); padding: 1rem; margin: .25rem 0 1.1rem; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55); overflow-x: auto; } .widget-vis iframe { display: block; border: 0; width: 100%; max-width: 360px; margin: 0 auto; border-radius: 4px; background: var(--kalk-2); } .widget-vis[data-str="bred"] iframe { max-width: 728px; } .widget-vis[data-str="stor"] iframe { max-width: none; } .kode-titel { display: block; font-weight: 700; color: var(--filt-tekst); margin-bottom: .4rem; } .kode { display: block; width: 100%; resize: vertical; margin: 0 0 1rem; font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--blaek); background: var(--kalk); border: 2px solid var(--filt-linje); border-radius: var(--r-lille); padding: .7rem .8rem; } .kode:focus-visible { outline: 3px solid var(--messing-lys); outline-offset: 2px; } .artikel code { font: .92em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--flade); padding: .05em .35em; border-radius: 4px; overflow-wrap: anywhere; } .adresse { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; } @media print { .widgetpanel { display: none; } } .pakkekort { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .pakkekort[hidden] { display: none; } .pakkekort-knap { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left; cursor: pointer; font: inherit; color: var(--blaek); padding: 1rem 1.1rem; min-height: 7rem; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--kalk); border: 0; border-top: 6px solid var(--rod); border-radius: var(--r-mellem); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55); transition: transform .2s ease, box-shadow .2s ease; } .pakkekort-knap:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .6); } .pakkekort-knap:focus-visible { outline: 3px solid var(--messing-lys); outline-offset: 3px; } .pakkekort-nr { font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--rod); } .pakkekort-navn { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; } .pakkekort-info { font-size: .95rem; color: var(--blaek-2); margin-top: auto; } .pakke-status { color: var(--filt-tekst); margin: .6rem 0 0; min-height: 1.2em; } .pakke-hjaelp { margin-top: 2rem; } .vaert-billede { margin: 0 auto 1rem; width: 100%; max-width: 40rem; aspect-ratio: 3 / 2; border-radius: var(--r-mellem); overflow: hidden; background: var(--kalk); } .vaert-billede[hidden] { display: none; } .vaert-billede img { width: 100%; height: 100%; object-fit: contain; display: block; } .vaert:fullscreen .vaert-billede, .vaert.storskaerm .vaert-billede { max-width: min(70rem, 120vh); } @media (prefers-reduced-motion: reduce) { .pakkekort-knap { transition: none; } .pakkekort-knap:hover { transform: none; } } .pakkekoeb { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--kalk); color: var(--blaek); border-top: 6px solid var(--rod); border-radius: var(--r-mellem); box-shadow: var(--skygge-papir); padding: 1.25rem 1.4rem; margin: 0 0 1.5rem; } .pakkekoeb > * { margin: 0 0 .7rem; } .pakkekoeb > :last-child { margin-bottom: 0; } .pakkekoeb .note { color: var(--blaek-2); } .pakkekoeb-titel { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); } .pakkekoeb-pris { font-family: var(--serif); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.8rem); color: var(--rod); line-height: 1; } .pakke-tak { font-family: var(--serif); font-size: 1.3rem; color: var(--loefte); margin: 0 0 1rem; } .pakke-tak[hidden] { display: none; } .pakkeindhold { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1rem 0 1.25rem; } .pakkeindhold-kort { background: var(--flade); border-radius: var(--r-mellem); border-top: 4px solid var(--rod); padding: .9rem 1rem; } .pakkeindhold-kort h3 { margin: .2rem 0 .4rem; font-size: 1.2rem; } .pakkeindhold-kort p { margin: 0 0 .4rem; } .smagsproeve { background: var(--flade); border-radius: var(--r-mellem); padding: .9rem 1rem; margin: 0 0 .9rem; } .smagsproeve .sp-tema { margin: 0 0 .3rem; font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rod); } .smagsproeve-tekst { font-weight: 700; margin: 0 0 .5rem; } .smagsproeve-valg { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .35rem; } .pakkevalg .panel-intro { color: var(--filt-tekst); max-width: 40rem; font-size: 1.02rem; margin: -.4rem 0 1.1rem; } .pakkeboks { margin: 2rem 0 0; } @media print { .pakkekoeb, .pakkeboks { display: none; } } .himmel--forside { padding-top: clamp(1.25rem, 3vw, 2.5rem); } .hero { max-width: 46rem; } .hero h1 { color: var(--kalk); margin: 0 0 .5rem; font-size: clamp(2.3rem, 1.6rem + 3.4vw, 3.9rem); } .hero-lead { font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); color: var(--nat-tekst); max-width: 38rem; margin: 0 auto 1.25rem; } .genveje { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0 auto 1.1rem; } .knap--genvej { min-width: 8.5rem; min-height: 3.25rem; font-size: 1.1rem; background: var(--kalk); color: var(--blaek); border-color: var(--kalk); box-shadow: 0 3px 0 var(--messing); } .knap--genvej:hover { background: #fff; border-color: var(--messing-lys); } .knap--genvej:first-child { background: var(--rod); color: #fff; border-color: var(--rod); box-shadow: 0 3px 0 var(--rod-mork); } .knap--genvej:first-child:hover { background: var(--rod-mork); border-color: var(--rod-mork); } @media (max-width: 26rem) { .genveje { gap: .45rem; } .knap--genvej { min-width: 0; flex: 1 1 0; padding: .6rem .5rem; font-size: 1rem; } } .hero-dage { margin: 0; } .hero-dage a { display: inline-flex; align-items: baseline; gap: .4rem; min-height: 2.75rem; padding: .4rem .9rem; border-radius: 999px; background: var(--aften-2); color: var(--messing-lys); text-decoration: none; font-weight: 700; } .hero-dage a:hover { box-shadow: inset 0 0 0 1.5px var(--messing-lys); } .hero-dage b { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--kalk); } .hero-dage b:empty { display: none; } .himmel .by img { aspect-ratio: 1536 / 410; object-fit: cover; object-position: 50% 0; } @media (max-width: 40rem) { .himmel .by img { aspect-ratio: 1056 / 400; } } .himmel--forside .by { margin-top: .75rem; } .laager { margin: 1.5rem 0 2rem; } @media (min-width: 46rem) { .laager { grid-template-columns: 1fr 1fr; } .laage--aaben { grid-column: auto; } } .laage h3 { margin: 0 0 .35rem; font-size: 1.5rem; } .laage-rum { height: 100%; } @media (min-width: 46rem) { .laage-rum { grid-template-columns: 1fr auto; align-items: end; column-gap: .75rem; padding-left: calc(var(--dor) + 1.1rem); padding-right: 1rem; } .laage-gnist { width: auto; } .laage-gnist img { height: clamp(7rem, 11vw, 8.5rem); width: auto; } } @media (max-width: 33.99rem) { .laage-rum { display: grid; grid-template-columns: 1fr auto; column-gap: .75rem; align-items: start; } .laage-tekst { display: contents; } .laage-tekst h3 { grid-column: 1; grid-row: 1; align-self: center; } .laage-gnist { grid-column: 2; grid-row: 1; float: none; width: auto; margin: -.4rem -.3rem 0 0; } .laage-gnist img { height: 4.75rem; width: auto; } .laage-tekst p { grid-column: 1 / -1; } .laage-tekst .knap { grid-column: 1 / -1; justify-self: start; } } .laage--uden-gnist .laage-rum { display: block; } .julefrokost-boks { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--aften); color: var(--kalk); border-radius: var(--r-stor); padding: 1.25rem; margin: 0 0 2rem; box-shadow: var(--skygge-papir); } @media (min-width: 40rem) { .julefrokost-boks { padding: 1.6rem 1.9rem; } } .julefrokost-boks h2 { margin: 0 0 .3rem; color: var(--kalk); } .julefrokost-boks > p { color: var(--nat-tekst); margin: 0 0 1rem; } .dybe-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .dybe-links li { margin: 0; } .dybe-links a { display: flex; flex-direction: column; gap: .2rem; height: 100%; padding: .85rem 1rem; border-radius: var(--r-mellem); background: var(--aften-2); border: 2px solid rgba(246, 244, 238, .16); color: var(--kalk); text-decoration: none; } .dybe-links a:hover { border-color: var(--messing-lys); } .dybe-links b { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--messing-lys); } .dybe-links span { font-size: .98rem; color: var(--nat-tekst); } .smaakort { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 0 0 1rem; } .smaakort-kort { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: var(--r-mellem); background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); box-shadow: var(--skygge-papir); color: var(--tekst); text-decoration: none; } .smaakort-kort b { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; } .smaakort-kort span { font-size: .98rem; color: var(--tekst-2); } .smaakort-kort:hover b { text-decoration: underline; text-decoration-color: var(--rod); } .fod-titel { font-weight: 700; font-size: 1rem; color: var(--kalk); margin: 0 0 .25rem !important; } .samtykke-titel { font-family: var(--serif); font-size: 1.15rem; margin: 0 !important; color: var(--tekst) !important; } @media (max-width: 47.99rem) { .samtykke { padding-top: .7rem; } .samtykke p { font-size: .9rem; line-height: 1.45; margin-bottom: .4rem; } } .videre { margin-top: 2rem; border-top: 1px solid var(--kant); padding-top: 1rem; } .videre-titel { font-weight: 700; margin: 0 0 .3rem; } .videre ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; } .videre li { margin: 0; } .videre a { display: inline-flex; align-items: center; min-height: 2.75rem; } .kruemmer a, .kruemmer span[aria-current] { display: inline-flex; align-items: center; min-height: 2.75rem; } .kruemmer { margin-bottom: .25rem; } .fod li + li { margin-top: 0; } .fod a, .fod .linkknap { display: inline-flex; align-items: center; min-height: 2.75rem; } .himmel-knap { margin: 0; padding: 0 0 2.25rem; } .himmel--side .noegletal { padding-bottom: 1.25rem; } html:not(.js) .kun-js { display: none !important; } .nedtaelling .tal:empty { display: none; } .klar-links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin: -.5rem 0 .25rem; font-size: 1rem; } .klar-links a, .klar-links .linkknap { color: var(--messing-lys); min-height: 2.75rem; display: inline-flex; align-items: center; } .linkknap--lys, .spillebord .linkknap, .panel .linkknap { color: var(--messing-lys); } .klar-status, .slut .slut-status { min-height: 1.2em; margin: 0; font-weight: 700; color: var(--messing-lys); font-size: .98rem; } .opsaetning .flere-valg { margin-top: .5rem; } .tal-felt--bred { display: flex; flex-wrap: wrap; margin: 0 0 .3rem; } .bord-status { margin: 0; font-weight: 700; color: var(--kalk); } .fase-hjaelp { margin: 0; color: var(--filt-tekst); font-size: .98rem; max-width: 30rem; } .fortryd, .bekraeft { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; background: rgba(8, 28, 20, .55); border: 2px solid var(--messing-lys); border-radius: var(--r-mellem); padding: .6rem 1rem; } .fortryd span, .bekraeft p { margin: 0; font-weight: 700; } .bekraeft { flex-direction: column; } #bordet-tomt.klar-til { background: var(--rod); border-color: var(--rod); color: #fff; } .slut .slut-titel { font-family: var(--serif); margin: .5rem 0 .3rem; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); line-height: 1.1; color: var(--messing-lys); } .slut .slut-titel:focus { outline: none; } .slut-videre a { color: var(--messing-lys); font-weight: 700; } .slut-videre a { display: inline-flex; align-items: center; min-height: 2.75rem; } .slut-hint { font-size: .95rem; color: var(--filt-tekst-2) !important; max-width: 34rem; margin: .25rem auto 0; } .startvalg { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; } .quizmester-forklaring { background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); border-left: 4px solid var(--rod); border-radius: var(--r-lille); padding: .6rem .9rem; } .knapgrupper { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin: .25rem 0 .5rem; } .knapgruppe { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .knapgruppe-titel { flex-basis: 100%; margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-2); } .knapgruppe .knap { min-height: 2.75rem; padding: .45rem .9rem; font-size: .98rem; } details.quiz-fold > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 700; color: var(--link); list-style: none; } details.quiz-fold > summary::-webkit-details-marker { display: none; } details.quiz-fold > summary::before { content: "+"; font-family: var(--serif); font-size: 1.4rem; line-height: 1; } details.quiz-fold[open] > summary::before { content: "–"; } .valgmuligheder .bogstav { min-width: 0; height: auto; padding: 0; margin-right: .15rem; border: 0; border-radius: 0; background: none; font-size: 1rem; color: var(--rod); } .valgmuligheder .bogstav::after { content: "."; } .vaert-valg li { background: none; border: 0; border-bottom: 1px solid rgba(246, 244, 238, .18); border-radius: 0; padding: .55rem .2rem; } .vaert-valg .bogstav { background: none; color: var(--messing-lys); min-width: 1.6rem; height: auto; font-family: var(--serif); font-size: 1.3em; } .vaert.vist .vaert-valg li.rigtigt { border-radius: var(--r-mellem); padding: .55rem .9rem; } .vaert.vist .vaert-valg li.rigtigt .bogstav { background: none; color: var(--gran); } @media (min-width: 48rem) { .vaert-valg li { border-bottom: 0; } } .vaert-slutknapper { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; } .vaert-slutknapper .knap { min-height: 2.75rem; } .vaert-status { min-height: 1.2em; text-align: center; color: var(--messing-lys); font-weight: 700; margin: .5rem 0 0; } .point-resultat { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: clamp(1.1rem, 1rem + .8vw, 1.6rem); } .point-resultat li { margin: 0; } .point-resultat .vinder { color: var(--messing-lys); font-weight: 700; } .pointtavle { width: 100%; max-width: 52rem; margin: 0 auto; background: rgba(8, 18, 40, .45); border-radius: var(--r-mellem); padding: .2rem .9rem; } .pointtavle > summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--messing-lys); list-style: none; } .pointtavle > summary::-webkit-details-marker { display: none; } .pointtavle > summary span { font-weight: 400; color: var(--nat-tekst); font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .point-hold { list-style: none; padding: 0; margin: .25rem 0 .5rem; display: grid; gap: .4rem; } .point-raekke { margin: 0; display: grid; grid-template-columns: 1fr auto 3rem auto; align-items: center; gap: .4rem; } .point-navn { min-width: 0; min-height: 2.75rem; padding: .3rem .6rem; font: 700 1rem var(--sans); color: var(--blaek); background: var(--kalk); border: 0; border-radius: var(--r-lille); } .point-knap { min-width: 2.75rem; min-height: 2.75rem; font-size: 1.3rem; padding: 0; } .point-tal { text-align: center; font-family: var(--serif); font-size: 1.6rem; color: var(--kalk); } .point-knapper { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; } @media print { .pointtavle { display: none !important; } } .fortsaet { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: -.25rem 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--filt-linje); } .fortsaet span { color: var(--filt-tekst); font-size: .98rem; } .flere-knapper > summary { cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 700; color: var(--link); list-style: none; } .flere-knapper > summary::-webkit-details-marker { display: none; } .flere-knapper > summary::before { content: "+"; font-family: var(--serif); font-size: 1.4rem; line-height: 1; } .flere-knapper[open] > summary::before { content: "–"; } .flere-knapper .plan-knapper { margin-top: .25rem; } .plan-forklaring { display: flex; flex-wrap: wrap; gap: .2rem 1.25rem; margin: .25rem 0 .75rem; font-size: .95rem; color: var(--tekst-2); } .plan-forklaring div { display: flex; gap: .35rem; } .plan-forklaring dt { font-weight: 700; color: var(--tekst); } .plan-forklaring dd { margin: 0; } .plandag-knapper .knap { min-height: 2.75rem; } .knap--brev { border-color: var(--messing-lys); } .nissebrev { grid-column: 1 / -1; margin-top: .6rem; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--kalk); color: var(--blaek); border-radius: var(--r-lille); padding: 1rem 1.15rem; border: 2px dashed var(--messing); font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; } .nissebrev p { margin: 0 0 .65rem; } .nissebrev-hilsen { font-size: 1.3rem; } .nissebrev-ps { font-size: 1rem; color: var(--blaek-2); } .nissebrev-knapper { font-family: var(--sans); margin: .5rem 0 0 !important; } @media print { .fortsaet, .flere-knapper > summary, .plan-forklaring, .knap--brev { display: none !important; } .flere-knapper { display: contents; } html[data-print="brev"] body > :not(main), html[data-print="brev"] main > .ramme > :not(.nisseplan), html[data-print="brev"] .plan-hoved, html[data-print="brev"] .indkoeb, html[data-print="brev"] .print-fod, html[data-print="brev"] .hyldepapir, html[data-print="brev"] .artikel { display: none !important; } html[data-print="brev"] .plandage { display: block; columns: 1; } html[data-print="brev"] .plandag:not(:has(.nissebrev.printes)) { display: none !important; } html[data-print="brev"] .plandag { border: 0 !important; padding: 0; display: block; } html[data-print="brev"] .plandag > :not(.nissebrev) { display: none !important; } html[data-print="brev"] .nissebrev { border: 0; background: #fff; font-size: 16pt; padding: 10mm 6mm; } html[data-print="brev"] .nissebrev-knapper { display: none; } .nissebrev-knapper { display: none; } } .tre-trin { counter-reset: trin; list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .tre-trin li { counter-increment: trin; margin: 0; display: flex; gap: .55rem; align-items: baseline; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--flade); border-radius: var(--r-mellem); padding: .6rem .8rem; box-shadow: var(--skygge-papir); } .tre-trin li::before { content: counter(trin); font-family: var(--serif); font-size: 1.4rem; color: var(--rod); } .trin-nr { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--messing-lys); color: var(--blaek); font: 700 1rem var(--sans); margin-right: .35rem; vertical-align: .15em; } .widget-trin { font-weight: 700; color: var(--filt-tekst); margin: .25rem 0 .4rem; } .widget-vis { position: relative; } .widget-vent { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--blaek-2); font-weight: 700; pointer-events: none; } .widget-vis iframe { position: relative; } .widget-link-vis { margin: .4rem auto 0; max-width: 360px; font: 12px/1.4 sans-serif; } .widget-vis[data-str="bred"] .widget-link-vis { max-width: 728px; } .widget-vis[data-str="stor"] .widget-link-vis { max-width: none; } .widget-link-vis a { color: var(--rod); } .cta-boks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; background: url(billeder-papir.4cf6560fb0.webp) 0 0 / 128px 128px, var(--gran); color: var(--kalk); border-radius: var(--r-mellem); padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; box-shadow: var(--skygge-papir); } .cta-boks p { margin: 0; flex: 1 1 18rem; } .kontakt-adresse { font-size: 1.3rem; font-weight: 700; overflow-wrap: anywhere; } .kast .terning[data-v="0"]::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: 3.2em; color: var(--kalk-3); } .kast .terning { font-size: clamp(1rem, 4vw, 1.6rem); } .startvalg .knap { min-height: 2.75rem; } .vaert-pakke { margin: 1rem auto 0; max-width: 34rem; font-size: .95rem; text-align: center; opacity: .92; } .vaert-pakke[hidden] { display: none; } .vaert-pakke a { color: inherit; font-weight: 700; } .legegruppe .pakkeboks { margin: 1.5rem 0 0; } .julefrokost-pakke { margin: 1rem 0 0; font-size: .95rem; } .julefrokost-pakke a { font-weight: 700; }