/* lavet af kabbah · kabbah.dk */
@font-face { font-family: Barlow; src: url(../fonte/barlow-regular.woff2) format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: Barlow; src: url(../fonte/barlow-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap }
@font-face { font-family: Barlow; src: url(../fonte/barlow-bold.woff2) format("woff2"); font-weight: 700; font-display: swap }
@font-face { font-family: Barlow; src: url(../fonte/barlow-extrabold.woff2) format("woff2"); font-weight: 800; font-display: swap }

:root {
  --orange: #EE4B2B;        
  --orange-dyb: #C9361A;    
  --grafit: #3A3D41;
  --grafit-dyb: #26282B;
  --staal: #55595E;
  --lys: #F4F4F2;
  --linje: #DCDCD8;
  --hvid: #fff;
  --tekst: #1F2023;
  --tekst-2: #55595E;
  --hjoerne: 3px;
  --snit: 12px;             
  --ease: cubic-bezier(.2, .7, .2, 1);
  --bredde: 72rem;
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { margin: 0; font: 400 1.0625rem/1.6 Barlow, system-ui, sans-serif; color: var(--tekst); background: var(--lys); -webkit-font-smoothing: antialiased }
img, video, svg { display: block; max-width: 100% }
a { color: inherit }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.08; letter-spacing: -.01em; margin: 0 }
p { margin: 0 }
button { font: inherit; cursor: pointer }
.skjult { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.ramme { max-width: var(--bredde); margin: 0 auto; padding: 0 1.25rem }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px }
.ikon { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }


.knap { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .95rem 1.9rem; font-weight: 700; font-size: 1.0625rem; letter-spacing: .01em; text-decoration: none; border: 2px solid transparent; border-radius: var(--hjoerne);
  clip-path: polygon(0 0, calc(100% - var(--snit)) 0, 100% var(--snit), 100% 100%, 0 100%); transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease) }
.knap:active { transform: translateY(1px) }
.knap--orange { background: var(--orange-dyb); color: var(--hvid) }
.knap--orange:hover { background: #B02E14 }
.knap--kant { border-color: rgba(255,255,255,.45); color: var(--hvid); clip-path: none }
.knap--kant:hover { border-color: var(--hvid); background: rgba(255,255,255,.08) }
.knap--hvid { background: var(--hvid); color: var(--orange-dyb) }
.knap--hvid:hover { background: var(--lys) }


.hoved { text-align: center; margin-bottom: 3.25rem }
.hoved::before { content: ""; display: block; width: 3.25rem; height: .3rem; margin: 0 auto 1.5rem; background: var(--orange); transform: skewX(-24deg) }
.hoved h2 { font-size: clamp(2rem, 4.2vw, 2.75rem) }
.hoved p { color: var(--tekst-2); max-width: 36rem; margin: 1rem auto 0; font-size: 1.125rem }
.sektion { padding: clamp(4.5rem, 9vw, 7rem) 0; position: relative }


.info { background: var(--grafit-dyb); color: var(--hvid); font-size: 1rem; font-weight: 600; display: none }
.info .ramme { display: flex; justify-content: flex-end; gap: 1.75rem; padding-top: .5rem; padding-bottom: .5rem }
.info a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none }
.info a:hover { color: #FFB4A3 }
.info .ikon { color: var(--orange) }
.menu { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s }
.menu.rullet { box-shadow: 0 6px 24px rgba(31,32,35,.08); border-color: var(--linje) }
.menu .ramme { display: flex; align-items: center; justify-content: space-between; height: 4.75rem }
.menu__logo img { width: 11.5rem; height: auto }
.menu__links { display: none; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0 }
.menu__links a:not(.knap) { text-decoration: none; font-weight: 600; color: var(--staal); position: relative; padding: .4rem 0 }
.menu__links a:not(.knap)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease) }
.menu__links a:not(.knap):hover { color: var(--tekst) }
.menu__links a:not(.knap):hover::after, .menu__links a[aria-current]::after { transform: scaleX(1) }
.menu__links .knap { padding: .6rem 1.35rem; font-size: 1rem }
.menu__knap { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; background: none; color: var(--tekst) }
.menu__knap .ikon { width: 1.6rem; height: 1.6rem }
.menu__mobil { display: none; border-top: 1px solid var(--linje); background: var(--hvid); padding: 1rem 1.25rem 1.25rem }
.menu__mobil.aaben { display: block }
.menu__mobil a:not(.knap) { display: block; padding: .7rem 0; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--lys) }
.menu__mobil .knap { width: 100%; margin-top: 1rem }
.menu__mobil .kontaktlinjer { display: grid; gap: .4rem; margin-top: 1rem; color: var(--tekst-2); font-size: .95rem }
.menu__mobil .kontaktlinjer a { border: 0; padding: .2rem 0; display: flex; gap: .5rem; align-items: center; font-weight: 400 }
@media (min-width: 52rem) {
  .info { display: block }
  .menu .ramme { height: 5.5rem }
  .menu__logo img { width: 13rem }
  .menu__links { display: flex }
  .menu__knap, .menu__mobil, .menu__mobil.aaben { display: none }
}


.top { position: relative; min-height: min(90vh, 56rem); display: grid; place-items: center; overflow: hidden; background: var(--grafit-dyb) center / cover no-repeat; color: var(--hvid); text-align: center }
.top video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.top::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,21,23,.55) 0%, rgba(20,21,23,.45) 45%, rgba(20,21,23,.75) 100%) }
.top__indhold { position: relative; z-index: 2; padding: 5rem 1.25rem 6rem; width: 100%; max-width: 62rem; min-width: 0 }
.maerke { display: inline-block; padding: .45rem 1rem; margin-bottom: 1.6rem; background: rgba(20,21,23,.55); border: 1px solid rgba(238,75,43,.65); border-left: 4px solid var(--orange); color: var(--hvid); font-weight: 700; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase }
.top h1 { font-size: clamp(1.9rem, 8.4vw, 5.4rem); hyphens: manual; overflow-wrap: break-word; line-height: 1.1; letter-spacing: -.02em; margin-bottom: 1.5rem }
.top h1 span { display: block; color: var(--orange) }
.top .maerke { max-width: none; margin: 0 0 1.6rem; font-size: clamp(.78rem, 2.6vw, .9rem); color: var(--hvid) }
.top p:not(.maerke) { font-size: clamp(1.125rem, 2.2vw, 1.3rem); color: rgba(255,255,255,.85); max-width: 40rem; margin: 0 auto 2.5rem }
.top__knapper { display: flex; flex-direction: column; gap: 1rem; justify-content: center }
.rul { position: absolute; z-index: 2; bottom: 1.75rem; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.6); text-decoration: none }
.rul::after { content: ""; width: 1px; height: 2rem; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: rul 2s var(--ease) infinite }
@keyframes rul { 0% { transform: scaleY(0); transform-origin: top } 50% { transform: scaleY(1); transform-origin: top } 51% { transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }
@media (min-width: 36rem) { .top__knapper { flex-direction: row } }


.kampagne { background: var(--orange); color: var(--hvid); padding: clamp(3.5rem, 7vw, 5rem) 0; position: relative; overflow: hidden }
.kampagne::after { content: ""; position: absolute; right: -6rem; top: -4rem; width: 22rem; height: 140%; background: rgba(255,255,255,.07); transform: skewX(-24deg); pointer-events: none }
.kampagne .ramme { position: relative; z-index: 1 }
.kampagne__slide { display: grid; gap: 2rem; align-items: center }
.kampagne__billede { aspect-ratio: 4 / 3; overflow: hidden; background: rgba(0,0,0,.12); border-radius: var(--hjoerne); box-shadow: 0 24px 48px -16px rgba(60,10,0,.45);
  clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%) }
.kampagne__billede img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.kampagne__billede:hover img { transform: scale(1.04) }
.kampagne__tekst { text-align: center }
.kampagne__etiket { font-weight: 700; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.88) }
.kampagne__tekst h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin: .75rem 0 1rem }
.kampagne__tekst p { font-size: 1.125rem; color: rgba(255,255,255,.92); max-width: 32rem; margin: 0 auto 2rem }
.kampagne__knapper { display: flex; flex-direction: column; gap: .9rem; justify-content: center }
.kampagne .knap--kant { border-color: var(--hvid) }
.kampagne__styr { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 2rem }
.kampagne__styr[hidden] { display: none }
.kampagne__pil { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.6); background: none; color: var(--hvid); border-radius: var(--hjoerne) }
.kampagne__pil:hover { background: rgba(255,255,255,.15); border-color: var(--hvid) }
.kampagne__prikker { display: flex; gap: .5rem }
.kampagne__prikker button { width: 1.6rem; height: .35rem; border: 0; padding: 0; background: rgba(255,255,255,.4); transform: skewX(-24deg) }
.kampagne__prikker button[aria-current="true"] { background: var(--hvid) }
@media (min-width: 48rem) {
  .kampagne__slide { grid-template-columns: 1fr 1fr; gap: 3.5rem }
  .kampagne__tekst { text-align: left }
  .kampagne__tekst p { margin-left: 0 }
  .kampagne__knapper { flex-direction: row; justify-content: flex-start }
}


.om { background: var(--hvid); text-align: center }
.om .ramme { max-width: 50rem }
.om__tekst p { font-size: 1.1875rem; color: var(--tekst-2); margin-bottom: 1.25rem }
.om__tekst p:first-child { color: var(--tekst); font-weight: 600; font-size: 1.3rem }


.tal { background: var(--grafit); color: var(--hvid); padding: 2.75rem 0 }
.tal ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem }
.tal li { text-align: center; padding: 0 .75rem }
.tal strong { display: flex; justify-content: center; align-items: center; height: 1em; font-size: clamp(2.6rem, 6vw, 3.9rem); font-weight: 800; line-height: 1; color: var(--orange); margin-bottom: .6rem; font-variant-numeric: tabular-nums }
.tal strong .ikon { width: .9em; height: .9em; stroke-width: 2.5 }
.tal span { font-size: .95rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); line-height: 1.3; display: block }
@media (min-width: 48rem) {
  .tal ul { grid-template-columns: repeat(4, 1fr) }
  .tal li + li { border-left: 1px solid rgba(255,255,255,.14) }
}


.ydelser { background: var(--lys) }
.ydelser::before { content: ""; position: absolute; inset: 0; opacity: .07; background-image: radial-gradient(var(--tekst) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none }
.ydelser .ramme { position: relative }
.kort-gitter { display: grid; gap: 1.25rem; counter-reset: ydelse }
@media (min-width: 40rem) { .kort-gitter { grid-template-columns: 1fr 1fr } }
@media (min-width: 64rem) { .kort-gitter { grid-template-columns: repeat(3, 1fr) } }
.ydelse { position: relative; overflow: hidden; background: var(--hvid); border: 1px solid var(--linje); border-radius: var(--hjoerne); padding: 2rem 1.9rem 2.25rem 2.15rem; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
  clip-path: polygon(0 0, calc(100% - 1.4rem) 0, 100% 1.4rem, 100% 100%, 0 100%) }
.ydelse::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--orange); transform: scaleY(.28); transform-origin: top; transition: transform .45s var(--ease) }
.ydelse::after { content: ""; position: absolute; right: -3rem; bottom: -3rem; width: 9rem; height: 9rem; background: repeating-linear-gradient(-45deg, rgba(238,75,43,.09) 0 6px, transparent 6px 14px); transform: rotate(0); transition: transform .5s var(--ease), opacity .4s; opacity: .7 }
.ydelse:hover { transform: translateY(-6px); border-color: rgba(238,75,43,.55); box-shadow: 0 22px 40px -20px rgba(214,58,28,.45) }
.ydelse:hover::before { transform: scaleY(1) }
.ydelse:hover::after { transform: translate(-1rem, -1rem); opacity: 1 }
.ydelse__nr { position: absolute; top: .6rem; right: 1.6rem; font-size: 4.6rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(238,75,43,.35); transition: color .35s, -webkit-text-stroke-color .35s }
.ydelse:hover .ydelse__nr { color: rgba(238,75,43,.14); -webkit-text-stroke-color: var(--orange) }
.ydelse__ikon { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; background: var(--orange-dyb); color: var(--hvid); border-radius: var(--hjoerne); margin-bottom: 1.5rem; box-shadow: 0 10px 20px -10px rgba(214,58,28,.7);
  clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% .7rem, 100% 100%, 0 100%); transition: transform .35s var(--ease), background-color .35s }
.ydelse__ikon .ikon { width: 1.7rem; height: 1.7rem }
.ydelse:hover .ydelse__ikon { transform: rotate(-6deg) scale(1.08); background: var(--orange) }
.ydelse h3 { font-size: 1.45rem; margin-bottom: .7rem }
.ydelse p { color: var(--tekst-2); position: relative }

.ydelse--fremhaevet { background: var(--grafit-dyb); border-color: var(--grafit-dyb); color: var(--hvid) }
.ydelse--fremhaevet p { color: rgba(255,255,255,.8) }
.ydelse--fremhaevet .ydelse__nr { -webkit-text-stroke-color: rgba(238,75,43,.6) }
.ydelse--fremhaevet::after { background: repeating-linear-gradient(-45deg, rgba(238,75,43,.22) 0 6px, transparent 6px 14px) }
.ydelse__flag { display: inline-block; margin-top: 1.1rem; padding: .3rem .7rem; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hvid); background: var(--orange-dyb); transform: skewX(-12deg) }

.ind .ydelse { opacity: 0; transform: translateY(1.5rem) }
.ind.synlig .ydelse { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease), box-shadow .35s, border-color .35s }
.ind.synlig .ydelse:hover { transform: translateY(-6px) }
.ind.synlig .ydelse:nth-child(2) { transition-delay: .08s } .ind.synlig .ydelse:nth-child(3) { transition-delay: .16s }
.ind.synlig .ydelse:nth-child(4) { transition-delay: .24s } .ind.synlig .ydelse:nth-child(5) { transition-delay: .32s } .ind.synlig .ydelse:nth-child(6) { transition-delay: .4s }
.ind.synlig .ydelse:hover { transition-delay: 0s }


.produkter { background: var(--hvid) }
.kategorier { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem }
@media (min-width: 48rem) { .kategorier { grid-template-columns: repeat(4, 1fr); gap: 1.25rem } }
.kategori { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--hjoerne); text-decoration: none; color: var(--hvid); background: var(--grafit);
  clip-path: polygon(0 0, calc(100% - 1.1rem) 0, 100% 1.1rem, 100% 100%, 0 100%) }
.kategori img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease) }
.kategori::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(20,21,23,.88) 0%, rgba(20,21,23,.2) 50%, transparent 100%) }
.kategori::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 2; height: .3rem; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease) }
.kategori:hover img { transform: scale(1.06) }
.kategori:hover::after { transform: scaleX(1) }
.kategori span { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 1rem; font-weight: 700; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.2 }
.kategori small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FFB4A3; margin-bottom: .2rem }


.maerker { background: var(--lys); padding: clamp(3.5rem, 7vw, 5rem) 0; overflow: hidden }
.maerker .hoved { margin-bottom: 2.5rem }
.maerker .hoved::before { display: none }
.baand { position: relative; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.baand ul { display: flex; width: max-content; list-style: none; margin: 0; padding: 0; animation: baand 32s linear infinite }
.baand:hover ul { animation-play-state: paused }
.baand li { padding: 0 clamp(2rem, 5vw, 4rem); font-size: clamp(1.75rem, 3.6vw, 2.6rem); font-weight: 800; letter-spacing: .02em; color: rgba(85,89,94,.5); white-space: nowrap; transition: color .3s }
.baand li:hover { color: var(--orange-dyb) }
@keyframes baand { to { transform: translateX(-50%) } }


.hvorfor { color: var(--hvid); background: var(--grafit-dyb) center / cover no-repeat; background-attachment: fixed }
.hvorfor::before { content: ""; position: absolute; inset: 0; background: rgba(20,21,23,.72) }
.hvorfor .ramme { position: relative }
.hvorfor .hoved h2 { color: var(--hvid) }
.fordele { display: grid; gap: 2.5rem; list-style: none; margin: 0; padding: 0; text-align: center }
@media (min-width: 40rem) { .fordele { grid-template-columns: 1fr 1fr } }
@media (min-width: 64rem) { .fordele { grid-template-columns: repeat(4, 1fr) } }
.fordel__ikon { width: 4rem; height: 4rem; margin: 0 auto 1.25rem; display: grid; place-items: center; background: rgba(238,75,43,.18); border: 1px solid rgba(238,75,43,.5); color: var(--orange); border-radius: var(--hjoerne); transform: rotate(45deg) }
.fordel__ikon .ikon { width: 1.7rem; height: 1.7rem; transform: rotate(-45deg) }
.fordele h3 { font-size: 1.3rem; margin-bottom: .5rem }
.fordele p { color: rgba(255,255,255,.8) }
@media (hover: none), (max-width: 64rem) { .hvorfor { background-attachment: scroll } }


.kontakt { background: var(--lys) }
.kontakt__gitter { display: grid; gap: 2.5rem }
@media (min-width: 64rem) { .kontakt__gitter { grid-template-columns: 1fr 1fr } }
.formular { position: relative; background: var(--hvid); border: 1px solid var(--linje); border-top: 4px solid var(--orange); border-radius: var(--hjoerne); padding: 2.25rem 1.5rem 1.75rem }
@media (min-width: 40rem) { .formular { padding: 2.5rem 2.25rem 2rem } }
.formular__ring { position: absolute; top: -1.4rem; right: 1.25rem; padding: .6rem 1.1rem; font-size: .95rem; box-shadow: 0 10px 20px -8px rgba(214,58,28,.6) }
.formular label { display: block; font-weight: 600; margin-bottom: 1.1rem }
.formular input, .formular textarea { display: block; width: 100%; margin-top: .4rem; padding: .85rem 1rem; font: inherit; font-weight: 400; color: var(--tekst); background: var(--lys); border: 1px solid var(--linje); border-radius: var(--hjoerne); transition: border-color .2s, background-color .2s }
.formular input:focus, .formular textarea:focus { outline: none; border-color: var(--orange); background: var(--hvid) }
.formular textarea { resize: vertical; min-height: 8rem }
.formular .knap { width: 100%; margin-top: .5rem }
.formular .lille { font-size: .9rem; color: var(--tekst-2); margin-top: .25rem }
.formular .lille a { color: var(--orange-dyb) }
.formular .status { margin-top: 1rem; font-weight: 600; min-height: 1.6em }
.firma h3 { font-size: 1.5rem; margin-bottom: 1.5rem }
.firma ul { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1rem }
.firma li { display: flex; gap: 1rem; align-items: flex-start }
.firma li > span:first-child { width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center; background: rgba(238,75,43,.1); color: var(--orange-dyb); border-radius: var(--hjoerne) }
.firma li a, .firma li span:last-child { padding-top: .45rem; color: var(--tekst-2); text-decoration: none }
.firma li a:hover { color: var(--orange-dyb) }
.firma__logo { display: grid; place-items: center; gap: .6rem; padding: 2.5rem 1.5rem; background: var(--hvid); border: 1px solid var(--linje); border-radius: var(--hjoerne); color: var(--tekst-2); font-size: .95rem; text-align: center }
.firma__logo img { width: min(17rem, 100%); height: auto }


.fod { background: var(--grafit-dyb); color: rgba(255,255,255,.7); font-size: .98rem }
.fod .ramme { padding-top: 4rem; padding-bottom: 2rem }
.fod__gitter { display: grid; gap: 2.5rem }
@media (min-width: 40rem) { .fod__gitter { grid-template-columns: 1fr 1fr } }
@media (min-width: 64rem) { .fod__gitter { grid-template-columns: 1.3fr 1fr 1fr 1fr } }
.fod img { width: 11rem; height: auto; margin-bottom: 1.25rem }

.fod ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem }
.fod a { text-decoration: none }
.fod a:hover { color: var(--hvid) }
.fod .tider li { display: flex; justify-content: space-between; gap: 1rem }
.fod .tider b { color: var(--hvid); font-weight: 600 }
.fod__nap li { display: flex; gap: .6rem; align-items: center }
.fod__nap .ikon { color: var(--orange) }
.fod__bund { border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; font-size: .88rem; color: rgba(255,255,255,.5) }
.stempel { display: block; width: 104px; aspect-ratio: 557.6 / 278; background: rgba(255,255,255,.55); transform: rotate(-5deg); transition: background-color .2s, transform .3s var(--ease);
  -webkit-mask: url(../billeder/lavet-af-kabbah.svg) center / contain no-repeat; mask: url(../billeder/lavet-af-kabbah.svg) center / contain no-repeat }
.stempel:hover { background: var(--hvid); transform: rotate(-2deg) scale(1.04) }


.optop { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 3rem; height: 3rem; display: grid; place-items: center; border: 0; background: var(--orange-dyb); color: var(--hvid); border-radius: var(--hjoerne); opacity: 0; pointer-events: none; transform: translateY(.5rem); transition: opacity .3s, transform .3s var(--ease) }
.optop.vis { opacity: 1; pointer-events: auto; transform: none }


.ind { opacity: 0; transform: translateY(1.75rem); transition: opacity .7s var(--ease), transform .7s var(--ease) }
.ind.synlig { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important }
  .ind, .ind .ydelse { opacity: 1; transform: none }
  .top video { display: none }
}
.formular .formular__ring { width: auto; margin-top: 0 }
.nb { white-space: nowrap }

.kampagne { background: var(--orange-dyb) }
.kampagne__tekst p { color: var(--hvid) }
.tal { background: var(--grafit-dyb) }
.ydelse h3, .ydelse p, .ydelse__ikon, .ydelse__flag, .ydelse__nr { z-index: 1 } .ydelse h3, .ydelse__flag { position: relative }


.spor { background: var(--grafit-dyb); color: rgba(255,255,255,.65); font-size: .9rem }
.spor .ramme { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-top: .75rem; padding-bottom: .75rem }
.spor a { text-decoration: none; display: inline-flex }
.spor a:hover { color: var(--hvid) }
.spor .ikon { width: 1rem; height: 1rem }
.spor span[aria-hidden] .ikon { width: .8rem; height: .8rem; opacity: .6 }
.spor [aria-current] { color: var(--hvid); font-weight: 600 }
.katalog-ramme { display: flex; gap: 2.5rem; padding-top: 2.25rem; padding-bottom: 5rem; align-items: flex-start }
.katalog__indhold { flex: 1; min-width: 0 }
.katalog { display: none; width: 16rem; flex: none; position: sticky; top: 7rem; max-height: calc(100vh - 8rem); overflow: auto; font-size: .95rem }
@media (min-width: 64rem) { .katalog { display: block } }
.katalog__alle { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-2); text-decoration: none; margin: 0 0 1rem .75rem }
.katalog__alle:hover { color: var(--orange-dyb) }
.katalog details { border-bottom: 1px solid var(--linje) }
.katalog summary { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .75rem; cursor: pointer; list-style: none; font-weight: 600 }
.katalog summary::-webkit-details-marker { display: none }
.katalog summary a { text-decoration: none; color: var(--tekst) }
.katalog summary a:hover, .katalog summary a[aria-current] { color: var(--orange-dyb) }
.katalog summary .ikon { width: .9rem; height: .9rem; color: var(--tekst-2); transition: transform .25s var(--ease) }
.katalog details[open] summary .ikon { transform: rotate(180deg) }
.katalog ul { list-style: none; margin: 0 0 .6rem .9rem; padding: 0 0 0 .6rem; border-left: 1px solid var(--linje) }
.katalog li a { display: block; padding: .3rem .5rem; color: var(--tekst-2); text-decoration: none; font-size: .92rem }
.katalog li a:hover { color: var(--tekst) }
.katalog .katalog__serie.er-aktiv { color: var(--orange-dyb); font-weight: 700 }
.katalog li ul { margin: .1rem 0 .4rem .3rem }
.katalog li ul a { font-size: .87rem }
.katalog li ul a[aria-current] { color: var(--orange-dyb); font-weight: 700; border-left: 2px solid var(--orange); margin-left: -.65rem; padding-left: 1rem; background: rgba(238,75,43,.06) }

.kat-hoved { margin-bottom: 2rem }
.kat-hoved__etiket { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-dyb); margin-bottom: .75rem }
.kat-hoved__etiket::before { content: ""; width: 1.6rem; height: .25rem; background: var(--orange); transform: skewX(-24deg) }
.kat-hoved h1 { font-size: clamp(1.9rem, 4vw, 2.6rem) }
.kat-hoved p:last-child { color: var(--tekst-2); max-width: 38rem; margin-top: .75rem }

.varer, .serier { display: grid; gap: 1.25rem }
@media (min-width: 36rem) { .varer, .serier { grid-template-columns: 1fr 1fr } }
@media (min-width: 80rem) { .varer { grid-template-columns: repeat(3, 1fr) } }
.vare, .serie { position: relative; display: flex; flex-direction: column; background: var(--hvid); border: 1px solid var(--linje); border-radius: var(--hjoerne); text-decoration: none; color: var(--tekst); overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 1.1rem) 0, 100% 1.1rem, 100% 100%, 0 100%); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s }
.vare:hover, .serie:hover { transform: translateY(-4px); border-color: rgba(238,75,43,.55); box-shadow: 0 18px 34px -18px rgba(214,58,28,.45) }
.vare__billede, .serie__billede { display: grid; place-items: center; background: var(--hvid); padding: 1.25rem; aspect-ratio: 4 / 3 }
.serie__billede { aspect-ratio: 16 / 10 }
.vare__billede img, .serie__billede img { max-height: 100%; width: auto; object-fit: contain; transition: transform .6s var(--ease) }
.vare:hover img, .serie:hover img { transform: scale(1.05) }
.vare__tekst, .serie__tekst { display: grid; gap: .3rem; padding: 1.1rem 1.25rem 0; flex: 1 }
.vare__tekst strong, .serie__tekst strong { font-size: 1.2rem; font-weight: 800 }
.vare__tekst span, .serie__tekst span { color: var(--tekst-2); font-size: .97rem }
.vare__bund { display: flex; justify-content: space-between; align-items: center; margin: 1rem 1.25rem 0; padding: .9rem 0 1.1rem; border-top: 1px solid var(--linje) }
.vare__bund b { color: var(--orange-dyb); font-weight: 800; font-size: 1.1rem }
.vare__bund span, .serie__tekst em { display: inline-flex; align-items: center; gap: .35rem; font-style: normal; font-weight: 600; color: var(--tekst-2); font-size: .95rem }
.serie__tekst em { color: var(--orange-dyb); margin: .6rem 0 1.2rem }
.vare:hover .vare__bund span { color: var(--orange-dyb) }
.vare .ikon, .serie .ikon { width: 1rem; height: 1rem; transition: transform .25s var(--ease) }
.vare:hover .ikon, .serie:hover .ikon { transform: translateX(3px) }
.serie--pop { border-color: rgba(238,75,43,.55); box-shadow: inset 0 0 0 1px rgba(238,75,43,.25) }
.serie--pop .serie__tekst strong { color: var(--orange-dyb) }
.serie__flag { position: absolute; z-index: 1; top: .9rem; left: .9rem; padding: .25rem .65rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--hvid); background: var(--orange-dyb); transform: skewX(-12deg) }

.produkt { display: grid; gap: 2rem }
@media (min-width: 48rem) { .produkt { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center } }
.produkt__billede { background: var(--hvid); border: 1px solid var(--linje); border-radius: var(--hjoerne); padding: 1.5rem; aspect-ratio: 1; display: grid; place-items: center;
  clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 1.5rem, 100% 100%, 0 100%) }
.produkt__billede img { max-height: 100%; width: auto; object-fit: contain }
.produkt__info h1 { font-size: clamp(2rem, 4vw, 2.8rem) }
.produkt__kort { color: var(--tekst-2); font-size: 1.15rem; margin-top: .5rem }
.produkt__pris { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--hvid); border: 1px solid var(--linje); border-left: 4px solid var(--orange); border-radius: var(--hjoerne) }
.produkt__pris small { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst-2) }
.produkt__pris b { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; color: var(--orange-dyb); margin-right: .5rem }
.produkt__pris span { color: var(--tekst-2) }
.produkt__ring { width: 100%; padding: 1.1rem 1rem; font-size: 1.1rem; box-shadow: 0 14px 26px -14px rgba(214,58,28,.7) }
.produkt__sekundaer { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .75rem }
.produkt__sekundaer a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem; background: var(--hvid); border: 1px solid var(--linje); border-radius: var(--hjoerne); text-decoration: none; font-weight: 600; font-size: .97rem; transition: border-color .2s, background-color .2s }
.produkt__sekundaer a:hover { border-color: var(--orange); background: rgba(238,75,43,.05) }
.produkt__sekundaer .ikon { color: var(--orange-dyb) }
.produkt__lokal { margin-top: 1rem; font-size: .95rem; color: var(--tekst-2) }
.produkt__afsnit { margin-top: 3rem }
.produkt__afsnit h2 { display: flex; align-items: center; gap: .75rem; font-size: 1.45rem; margin-bottom: 1rem }
.produkt__afsnit h2::before { content: ""; width: 1.8rem; height: .28rem; background: var(--orange); transform: skewX(-24deg) }
.produkt__tekst { background: var(--hvid); border: 1px solid var(--linje); border-radius: var(--hjoerne); padding: 1.5rem; color: var(--tekst-2) }
.produkt__tekst p + p { margin-top: .9rem }
.specs { width: 100%; border-collapse: collapse; background: var(--hvid); border: 1px solid var(--linje); font-size: .98rem }
.specs th, .specs td { text-align: left; padding: .75rem 1.1rem; border-bottom: 1px solid var(--linje); vertical-align: top }
.specs th { width: 40%; font-weight: 600; background: rgba(244,244,242,.7) }
.specs td { color: var(--tekst-2) }
.specs tr:hover td, .specs tr:hover th { background: rgba(238,75,43,.04) }
.vare__billede, .serie__billede, .produkt__billede { overflow: hidden; min-height: 0 }
.vare__billede img, .serie__billede img, .produkt__billede img { width: 100%; height: 100%; max-height: none; object-fit: contain }

[hidden] { display: none !important }

.admin { padding: 3rem 0 5rem }
.admin .formular { max-width: 32rem }
.admin__bar { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem }
.admin__link { background: none; border: 0; padding: .4rem 0; color: var(--tekst-2); text-decoration: underline; font-weight: 600 }
.admin__h2 { font-size: 1.35rem; margin: 2.25rem 0 1rem }
.admin__h2 small { font-size: .9rem; font-weight: 400; color: var(--tekst-2) }
.admin__liste { display: grid; gap: 1rem }
@media (min-width: 48rem) { .admin__liste { grid-template-columns: 1fr 1fr } }
.admin__kort { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; background: var(--hvid); border: 1px solid var(--linje); border-left: 4px solid var(--orange); border-radius: var(--hjoerne); padding: 1rem }
.admin__kort.er-slukket { border-left-color: var(--linje); opacity: .8 }
.admin__kort-billede { aspect-ratio: 4 / 3; background: var(--lys); overflow: hidden }
.admin__kort-billede img { width: 100%; height: 100%; object-fit: cover }
.admin__kort h3 { font-size: 1.1rem; margin: .3rem 0 .2rem }
.admin__kort p { color: var(--tekst-2); font-size: .95rem }
.admin__maerke { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-dyb) }
.admin__dato { font-weight: 600; color: var(--tekst) !important }
.admin__handlinger { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem }
.admin__handlinger button { padding: .45rem .8rem; border: 1px solid var(--linje); background: var(--lys); border-radius: var(--hjoerne); font-weight: 600; font-size: .9rem }
.admin__handlinger button:hover { border-color: var(--orange) }
.admin__tom { color: var(--tekst-2) }
.admin__arkiv { margin-top: 2.25rem }
.admin__arkiv summary { cursor: pointer; font-weight: 700; font-size: 1.15rem; margin-bottom: 1rem }
.admin__dialog { width: min(72rem, calc(100% - 2rem)); max-height: calc(100vh - 2rem); border: 0; border-radius: var(--hjoerne); padding: 0; background: var(--lys) }
.admin__dialog::backdrop { background: rgba(20,21,23,.6) }
.admin__dialog[open] { display: grid }
@media (min-width: 64rem) { .admin__dialog[open] { grid-template-columns: 26rem 1fr } }
.admin__dialog .formular { border-top: 0; max-width: none }
.admin__dialog h2 { font-size: 1.5rem; margin-bottom: 1.25rem }
.admin__knapper { display: flex; align-items: center; gap: 1.25rem }
.admin__knapper .knap { width: auto }
.admin__preview { padding: 1.5rem; align-self: center }
.admin__preview-titel { font-weight: 700; margin-bottom: .75rem; color: var(--tekst-2) }
.kampagne--preview { padding: 2rem 1.5rem; border-radius: var(--hjoerne) }
.kampagne--preview .kampagne__slide { grid-template-columns: 1fr 1fr; gap: 1.5rem }
.kampagne--preview .kampagne__tekst { text-align: left }
.kampagne--preview .kampagne__tekst h2 { font-size: 1.6rem }
.kampagne--preview .kampagne__knapper { flex-direction: column }
.kampagne--preview .knap { padding: .6rem 1rem; font-size: .9rem }

.prosa-side { background: var(--lys) }
.prosa { max-width: 44rem; background: var(--hvid); border: 1px solid var(--linje); border-top: 4px solid var(--orange); border-radius: var(--hjoerne); padding: clamp(1.5rem, 4vw, 2.5rem) }
.prosa h2 { font-size: 1.3rem; margin: 2rem 0 .6rem }
.prosa h2:first-child { margin-top: 0 }
.prosa p { color: var(--tekst-2) }
.prosa p + p { margin-top: .8rem }
.prosa a { color: var(--orange-dyb) }
.prosa__dato { margin-top: 2rem !important; font-size: .9rem }
.fejlside { min-height: 55vh }
.produkt__pris b a { color: inherit; text-decoration: none }
.skjult:focus { position: fixed !important; left: 1rem; top: 1rem; z-index: 100; width: auto; height: auto; clip: auto; padding: .75rem 1.25rem; background: var(--hvid); color: var(--tekst); font-weight: 700; border: 2px solid var(--orange) }
section[id] { scroll-margin-top: 5rem } @media (min-width: 52rem) { section[id] { scroll-margin-top: 6rem } }

.formular input:focus-visible, .formular textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px }
.fod h2 { color: var(--hvid); font-size: 1.1rem; margin-bottom: 1.1rem }