/* nefertete.dk – designsystem. Roligt, redaktionelt og eksklusivt: hvid (#fff), helt sort og bronze (#8a684e),
   stor serif (Cormorant) mod let sans (Outfit). Alle skrifter ligger på sitet (SIL OFL 1.1). */

@font-face { font-family: 'Cormorant'; src: url('/assets/fonts/cormorant-latin-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant'; src: url('/assets/fonts/cormorant-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cormorant'; src: url('/assets/fonts/cormorant-latin-wght-italic.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; src: url('/assets/fonts/outfit-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113; }

:root {
  --papir: #ffffff;
  --papir-2: #f3f3f3;
  --hvid: #f7f7f7;
  --blaek: #000000;
  --blaek-2: #2b2b2b;
  --graa: #6b6b6b;
  --linje: rgba(0, 0, 0, .12);
  --linje-lys: rgba(255, 255, 255, .22);
  --accent: #8a684e;
  --accent-lys: #cdb08f;
  --serif: 'Cormorant', 'Cormorant Garamond', Garamond, Georgia, serif;
  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --max: 1280px;
  --gut: clamp(1.25rem, 4.5vw, 3.5rem);
  --sek: clamp(5rem, 11vw, 9.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--papir); color: var(--blaek); font: 350 1.0625rem/1.75 var(--sans); font-feature-settings: 'kern', 'liga'; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
p a, dd a, li a, .note a { color: var(--accent); }
::selection { background: var(--blaek); color: var(--papir); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(3.1rem, 7.4vw, 6.9rem); line-height: .96; }
h2 { font-size: clamp(2.25rem, 4.4vw, 3.75rem); line-height: 1.02; }
h3 { font-size: clamp(1.55rem, 2.2vw, 1.95rem); line-height: 1.1; }
h1 em, h2 em { font-style: italic; color: var(--accent); }
p { margin: 0 0 1.1em; text-wrap: pretty; }

.ramme { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.smal { max-width: calc(780px + 2 * var(--gut)); }
.center { text-align: center; }
.luft-top { margin-top: 2.5rem; }
.etiket.luft-top { margin-top: 2.75rem; } /* .etiket nulstiller ellers margin-top */
.skip { position: absolute; left: -999px; top: .5rem; background: var(--blaek); color: var(--papir); padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; }

.etiket { font: 500 .72rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.4rem; display: flex; align-items: center; gap: .9rem; }
.etiket::before { content: ''; width: 2.2rem; height: 1px; background: currentColor; opacity: .7; flex: none; }
.center .etiket, .etiket.center { justify-content: center; }
.etiket.lys { color: var(--accent-lys); }
.ingress { font-size: clamp(1.15rem, 1.6vw, 1.32rem); line-height: 1.6; color: var(--blaek-2); max-width: 38em; font-weight: 300; }
.note { font-size: .88rem; color: var(--graa); }

/* knapper */
.knapper { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.knapper.center { justify-content: center; }
.knapper.lodret { flex-direction: column; align-items: flex-start; margin-top: 1rem; }
.knap { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3.25rem; padding: .85rem 1.9rem; background: var(--blaek); color: var(--papir); border: 1px solid var(--blaek); font: 500 .78rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.knap:hover { background: var(--accent); border-color: var(--accent); }
.knap-kant { background: transparent; color: var(--blaek); border-color: var(--linje); }
.knap-kant:hover { background: var(--blaek); color: var(--papir); border-color: var(--blaek); }
.knap-lys { background: var(--papir); color: var(--blaek); border-color: var(--papir); }
.knap-lys:hover { background: var(--accent-lys); border-color: var(--accent-lys); color: var(--blaek); }
.knap-kant-lys { background: transparent; color: var(--papir); border-color: var(--linje-lys); }
.knap-kant-lys:hover { background: var(--papir); color: var(--blaek); }
.knap-lille { min-height: 2.6rem; padding: .6rem 1.25rem; font-size: .7rem; }
.pil-link { display: inline-flex; gap: .55rem; align-items: center; font: 500 .78rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--blaek); padding: .6rem 0; border-bottom: 1px solid var(--linje); transition: gap .3s var(--ease), border-color .3s; margin-top: .6rem; }
.pil-link:hover { gap: .95rem; border-color: currentColor; }
.pil-link.lys { color: var(--papir); border-color: var(--linje-lys); }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papir) 88%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .4s, background .4s; }
.top.rullet { border-color: var(--linje); }
.top-in { display: flex; align-items: center; gap: 2rem; height: 5.25rem; }
.logo { flex: none; }
.logo img { height: 3rem; width: auto; }
.hovednav { display: flex; gap: 2rem; margin-left: auto; }
.hovednav a { position: relative; font: 450 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: .5rem 0; color: var(--blaek-2); }
.hovednav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.hovednav a:hover::after, .hovednav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hovednav a[aria-current] { color: var(--blaek); }
[data-tv-del="topbar"]:empty { display: none; }
.mobilmenu { display: none; }

@media (max-width: 1040px) {
  .hovednav, .top-book { display: none; }
  .top-in { height: 4.5rem; justify-content: space-between; }
  .logo img { height: 2.2rem; }
  .mobilmenu { display: block; }
  .mobilmenu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; font: 500 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; padding: .8rem 0; }
  .mobilmenu summary::-webkit-details-marker { display: none; }
  .mobilmenu summary svg { width: 1.5rem; height: 1.5rem; }
  .mobilmenu[open] .mobilmenu-liste { position: fixed; inset: 4.5rem 0 0; background: var(--papir); padding: 2rem var(--gut) 3rem; display: flex; flex-direction: column; overflow-y: auto; animation: ind .4s var(--ease); }
  .mobilmenu-liste a { font: 400 2.1rem/1.15 var(--serif); text-decoration: none; padding: .55rem 0; border-bottom: 1px solid var(--linje); }
  .mobilmenu-liste a[aria-current] { color: var(--accent); font-style: italic; }
  .mobilmenu-liste .knap { font: 500 .78rem/1 var(--sans); margin-top: 2rem; border-bottom: 0; }
  .mobilmenu-liste .mobil-info { margin-top: 1.5rem; font-size: .95rem; color: var(--graa); }
}
@keyframes ind { from { opacity: 0; transform: translateY(-8px); } }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); align-items: center; min-height: calc(100svh - 5.25rem); max-width: 1600px; margin-inline: auto; }
.hero-tekst { padding-block: 4rem; max-width: none; padding-left: max(var(--gut), calc((min(100vw, 1600px) - var(--max)) / 2 + var(--gut))); padding-right: clamp(1rem, 3vw, 3rem); }
.hero h1 { margin-bottom: 2rem; }
.hero-billede { margin: 0; height: 100%; min-height: 32rem; position: relative; overflow: hidden; }
.hero-billede img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; animation: afslor 1.6s var(--ease) both; }
@keyframes afslor { from { clip-path: inset(0 0 0 100%); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: scale(1); } }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-tekst { padding-block: 3rem 2.5rem; }
  .hero-billede { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
}

/* fakta-bånd */
.fakta { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); margin-block: 0; padding-block: 3rem; border-bottom: 1px solid var(--linje); }
.fakta li { padding: .5rem 1.5rem; border-left: 1px solid var(--linje); display: flex; flex-direction: column; gap: .35rem; }
.fakta li:first-child { border-left: 0; padding-left: 0; }
.fakta b { font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.05 var(--serif); }
.fakta span { font-size: .9rem; color: var(--graa); line-height: 1.45; }
@media (max-width: 900px) { .fakta { grid-template-columns: 1fr 1fr; row-gap: 1.75rem; } .fakta li:nth-child(3) { border-left: 0; padding-left: 0; } }

/* sektioner */
.sek { padding-block: var(--sek); }
.sek-hoved { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sek-hoved p:last-child { color: var(--graa); }
.sek-moerk { background: var(--blaek); color: var(--papir); }
.sek-moerk h2 { color: var(--hvid); }
.sek-moerk p { color: rgba(245, 240, 232, .8); }
.sek-lys { background: var(--papir-2); }
.todelt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.todelt.topjust { align-items: start; }
.todelt > *, .tredelt > * { min-width: 0; } /* ellers kan en bred pristabel skubbe spalten ud over skærmkanten på mobil */
.todelt.omvendt > :first-child { order: 2; }
.tredelt { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 4rem); }
@media (max-width: 900px) { .todelt, .tredelt { grid-template-columns: 1fr; } .todelt.omvendt > :first-child { order: 0; } }

/* kort */
.kort-gitter { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linje); border-left: 1px solid var(--linje); }
.kort { position: relative; display: flex; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.75rem); min-height: 19rem; border-right: 1px solid var(--linje); border-bottom: 1px solid var(--linje); text-decoration: none; transition: background .5s var(--ease); overflow: hidden; }
.kort::before { content: ''; position: absolute; inset: 0; background: var(--hvid); transform: translateY(101%); transition: transform .6s var(--ease); z-index: -1; }
.kort:hover::before { transform: translateY(0); }
.kort { isolation: isolate; }
.kort h3 { margin-bottom: .6rem; }
.kort p { color: var(--graa); font-size: .98rem; }
.kort .etiket { margin-bottom: 1.2rem; }
.kort-nr { position: absolute; top: 1.6rem; right: 1.9rem; font: italic 400 1.05rem/1 var(--serif); color: var(--graa); }
.kort-pris { margin-top: auto; padding-top: 1.2rem; font-size: .82rem !important; letter-spacing: .04em; color: var(--blaek-2) !important; }
.kort .pil { position: absolute; right: 1.9rem; bottom: 1.7rem; font-size: 1.2rem; transition: transform .45s var(--ease); color: var(--accent); }
.kort:hover .pil { transform: translateX(6px); }
@media (max-width: 1000px) { .kort-gitter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .kort-gitter { grid-template-columns: 1fr; } .kort { min-height: 0; } }

/* billeder */
.portraet { margin: 0; position: relative; }
.portraet img { width: 100%; aspect-ratio: 844 / 890; object-fit: cover; }
.portraet::after { content: ''; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem; border: 1px solid var(--accent-lys); z-index: -1; pointer-events: none; }
.sek-moerk .portraet { isolation: isolate; }
.sek-moerk .portraet::after { z-index: 1; mix-blend-mode: normal; opacity: .55; }
.ramme-billede { margin: 0; overflow: hidden; }
.ramme-billede img, .galleri img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.4s var(--ease); }
.ramme-billede:hover img, .galleri figure:hover img { transform: scale(1.035); }
.galleri { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(1rem, 2.5vw, 2rem); align-items: end; }
.galleri figure { margin: 0; overflow: hidden; }
.galleri figure:last-child { margin-bottom: clamp(2rem, 8vw, 7rem); }
.galleri figure:last-child img { aspect-ratio: 4 / 5; }
@media (max-width: 700px) { .galleri { grid-template-columns: 1fr; } .galleri figure:last-child { margin-bottom: 0; } .galleri figure:last-child img { aspect-ratio: 4 / 3; } }
.side-billede { margin: 0 auto; max-width: 1600px; overflow: hidden; }
.side-billede { max-width: calc(var(--max) - 2 * var(--gut) + 0px); padding-inline: 0; }
.side-billede img { width: 100%; height: clamp(16rem, 44vw, 34rem); object-fit: cover; }
@media (min-width: 1000px) { .side-billede { width: calc(100% - 2 * var(--gut)); } }
.side-billede.bred { margin-bottom: 0; }

/* citat og presse */
.citat { margin: 0 0 1.75rem; padding: 0; }
.citat p { font: italic 400 clamp(1.45rem, 2.3vw, 1.95rem)/1.35 var(--serif); color: var(--hvid) !important; }
.presse { padding-block: clamp(4rem, 9vw, 7rem); border-block: 1px solid var(--linje); text-align: center; }
.presse .etiket { justify-content: center; }
.presse-tekst { font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.15; max-width: 22em; margin-inline: auto; }
.presse-tekst em { color: var(--blaek); }

/* undersider */
.side-hoved { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); }
.side-hoved h1 { max-width: 12em; }
.krumme ol { list-style: none; padding: 0; margin: 0 0 2.2rem; display: flex; gap: .6rem; font-size: .8rem; letter-spacing: .06em; color: var(--graa); }
.krumme li + li::before { content: '/'; margin-right: .6rem; opacity: .6; }
.krumme a { text-decoration: none; }
.krumme a:hover { color: var(--blaek); }
.laesetekst h2 { font-size: clamp(1.75rem, 2.8vw, 2.4rem); margin-top: 2.6rem; }
.laesetekst h2:first-child { margin-top: 0; }
.laesetekst p { color: var(--blaek-2); }
.signatur { font: italic 400 2rem/1 var(--serif); color: var(--accent) !important; margin-top: 2.5rem; }
.om-hoved { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: end; padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2rem, 4vw, 3rem); }
.om-hoved .om-tekst { padding-bottom: 2rem; }
@media (max-width: 900px) { .om-hoved { grid-template-columns: 1fr; } .portraet.stor { max-width: 30rem; } }
.trin { padding-left: 1.2rem; }
.trin li { margin-bottom: .8rem; padding-left: .4rem; }
.trin li::marker { font-family: var(--serif); color: var(--accent); }

/* priser */
.prisgruppe { margin-bottom: 2.5rem; }
.prisgruppe h3 { font-size: 1.6rem; padding-bottom: .7rem; border-bottom: 1px solid var(--blaek); margin-bottom: 0; }
.priser { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.priser th, .priser td { padding: 1rem 0; border-bottom: 1px solid var(--linje); vertical-align: baseline; }
.priser th { text-align: left; font-weight: 350; padding-right: 1.5rem; }
.priser td { text-align: right; white-space: nowrap; font-weight: 450; }
.priser td.pris-tekst { white-space: normal; max-width: 9rem; } /* tekstpriser (»1.000 kr. pr. time«) må bryde, så tabellen kan være på en smal skærm */
.priser th { overflow-wrap: anywhere; }
.priser .tid, .priser .fra { color: var(--graa); font-size: .82rem; font-weight: 350; }
.priser .tid { display: inline-block; margin-left: .35rem; }
.priser tr { transition: background .3s; }
.priser tr:hover { background: color-mix(in srgb, var(--papir-2) 55%, transparent); }
.prisnav { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--linje); }
.prisnav a { font: 450 .74rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: .6rem 0; color: var(--blaek-2); }
.prisnav a:hover { color: var(--accent); }
.prisafsnit { padding-top: 3rem; }
.prisafsnit h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); padding-bottom: .9rem; border-bottom: 1px solid var(--blaek); margin-bottom: 0; }
.prisafsnit .prisgruppe { margin-bottom: 0; }
.prisliste > .note { margin-top: 3rem; }

/* godt at vide */
.viden { background: var(--papir-2); padding: clamp(2rem, 5vw, 3.5rem); }
.viden h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.viden dl { margin: 0; padding: 1.1rem 0; border-top: 1px solid var(--linje); display: grid; grid-template-columns: 13rem 1fr; gap: 1.5rem; }
.viden dt { font: 400 1.35rem/1.2 var(--serif); }
.viden dd { margin: 0; color: var(--blaek-2); }
.viden .note { margin: 1.2rem 0 0; }
@media (max-width: 640px) { .viden dl { grid-template-columns: 1fr; gap: .3rem; } }

/* mærker */
.maerker { border-left: 1px solid var(--linje); padding-left: clamp(1.5rem, 4vw, 3.5rem); }
.maerke { margin: 0 0 2.5rem; }
.maerke img { width: 13rem; height: auto; }
.maerke figcaption { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-top: .6rem; }
.maerkeliste { list-style: none; padding: 0; margin: 0; }
.maerkeliste li { font: 400 1.7rem/1.4 var(--serif); padding: .4rem 0; border-bottom: 1px solid var(--linje); }
@media (max-width: 900px) { .maerker { border-left: 0; padding-left: 0; } }

/* kontakt, tider */
.adresse { font-style: normal; font-size: 1.15rem; line-height: 1.6; margin-bottom: 1rem; }
.adresse strong { font: 400 1.6rem/1.3 var(--serif); }
.tider { border-collapse: collapse; width: 100%; max-width: 22rem; font-variant-numeric: tabular-nums; }
.tider th, .tider td { padding: .55rem 0; border-bottom: 1px solid var(--linje); text-align: left; font-weight: 350; }
.tider td { text-align: right; }
.sociale a { color: var(--blaek); }

/* FAQ */
.faq { border-bottom: 1px solid var(--linje); }
.faq:first-child { border-top: 1px solid var(--linje); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem 0; font: 400 clamp(1.35rem, 2vw, 1.65rem)/1.25 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 1rem; height: 1rem; background: linear-gradient(currentColor, currentColor) center/100% 1px no-repeat, linear-gradient(currentColor, currentColor) center/1px 100% no-repeat; transition: transform .4s var(--ease); color: var(--accent); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq div { padding: 0 3rem 1.4rem 0; color: var(--blaek-2); }

/* afslutning */
.afslut { position: relative; min-height: min(78vh, 46rem); display: flex; align-items: flex-end; color: var(--papir); overflow: hidden; isolation: isolate; }
.afslut-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.afslut::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 45%, rgba(0, 0, 0, .25) 100%); }
.afslut-in { padding-block: clamp(4rem, 9vw, 7rem); }
.afslut h2 { color: var(--hvid); max-width: 12em; }
.afslut p { max-width: 34em; color: rgba(245, 240, 232, .84); }

/* footer (partial) */
.foden { background: #000; color: rgba(255, 255, 255, .7); padding-block: clamp(4rem, 8vw, 6rem) 2rem; font-size: .95rem; }
.foden a { color: rgba(245, 240, 232, .9); text-decoration: none; }
.foden a:hover { color: var(--accent-lys); }
.foden-gitter { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3.5rem; border-bottom: 1px solid var(--linje-lys); }
/* footer-logoet er præcis lige så bredt som adresselinjen under det (Jan, 08-11-2026) */
.foden-id { display: inline-grid; width: max-content; max-width: 100%; }
.foden-id .foden-logo { display: block; width: 0; min-width: 100%; } /* billedet må ikke selv bestemme bredden */
.foden-id .foden-logo img { width: 100%; height: auto; margin-bottom: 1.2rem; opacity: .92; }
.foden h2 { font: 500 .7rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-lys); margin-bottom: 1.3rem; }
.foden ul { list-style: none; margin: 0; padding: 0; }
.foden li { padding: .25rem 0; }
.foden .tider { max-width: none; }
.foden .tider th, .foden .tider td { border-color: var(--linje-lys); padding: .35rem 0; }
.foden-bund { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.8rem; font-size: .8rem; color: rgba(245, 240, 232, .5); }
@media (max-width: 900px) { .foden-gitter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foden-gitter { grid-template-columns: 1fr; } }

/* bevægelse: elementer glider roligt frem, når de kommer i syne (kun med JS og uden reduceret bevægelse) */
.js .vis { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .vis.synlig { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .vis { opacity: 1; transform: none; }
}
@media print { .top, .afslut, .foden, .skip, .hero-logo, .skuffe, .skuffe-bg, .forhaand, .film-knap, [data-tv-del="menu"] { display: none !important; } body { background: #fff; } .js .vis { opacity: 1 !important; transform: none !important; } .klaeb-titel, .klaeb-pris, .blok-fig, .stol-film, .menu-hoved { position: static !important; } }

/* film: stille loops uden lyd; plakaten vises, til filmen spiller (og altid ved reduceret bevægelse) */
.film { position: relative; overflow: hidden; background: var(--papir-2); }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-film { position: absolute; inset: 0; animation: afslor 1.6s var(--ease) both; }
.film.kvadrat { aspect-ratio: 1; }
.film-ramme { margin: 2.2rem 0 2.4rem; }
.film-knap { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; font: 500 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--papir); background: rgba(31, 27, 24, .55); border: 1px solid rgba(245, 240, 232, .35); padding: .65rem .9rem; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .3s; }
.film-knap:hover { background: rgba(31, 27, 24, .8); }
.film-knap .film-afspil, .film-knap[aria-pressed="true"] .film-pause { display: none; }
.film-knap[aria-pressed="true"] .film-afspil { display: inline; }

/* indsat billede i læsetekst */
.indsat { margin: 2.8rem 0; }
.indsat img { width: 100%; max-width: 26rem; aspect-ratio: 3 / 4; object-fit: cover; }
.indsat figcaption { font-size: .85rem; color: var(--graa); margin-top: .7rem; font-style: italic; font-family: var(--serif); font-size: 1.05rem; }
.galleri.par { grid-template-columns: 1fr 1fr; align-items: start; margin-top: clamp(3rem, 7vw, 5rem); }
.galleri.par figure:last-child { margin-bottom: 0; margin-top: clamp(2rem, 7vw, 6rem); }
.galleri.par img { aspect-ratio: 3 / 4 !important; }
@media (max-width: 700px) { .galleri.par { grid-template-columns: 1fr; } .galleri.par figure:last-child { margin-top: 0; } }


/* ===== v2 · Atelier (08-11-2026): inspireret af modehusenes forsider – billedet fylder, navigationen hvisker ===== */
/* header: navnet i midten, små links på begge sider */
.top-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; height: 5rem; padding-inline: clamp(1.25rem, 3vw, 2.5rem); max-width: none; }
.nav-v, .nav-h nav { display: flex; gap: clamp(1.2rem, 2.2vw, 2.2rem); }
.nav-h { display: flex; align-items: center; justify-content: flex-end; gap: clamp(1.2rem, 2.2vw, 2.2rem); }
.nav-v a, .nav-h a { position: relative; font: 400 .8rem/1 var(--sans); letter-spacing: .04em; text-decoration: none; color: inherit; padding: .5rem 0; }
.nav-v a::after, .nav-h nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav-v a:hover::after, .nav-h nav a:hover::after, .nav-v a[aria-current]::after, .nav-h a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.top-book { border: 1px solid currentColor; padding: .62rem 1.1rem !important; letter-spacing: .14em !important; text-transform: uppercase; font-size: .68rem !important; transition: background .3s, color .3s; }
.top-book:hover { background: var(--blaek); color: var(--papir); border-color: var(--blaek); }
.logo img { height: 3.3rem; }
@media (max-width: 1040px) {
  .top-in { grid-template-columns: auto 1fr; height: 4.5rem; }
  .nav-v, .nav-h nav, .top-book { display: none !important; }
  .logo img { height: 2.2rem; }
}

/* sider med hero i fuld skærm: headeren ligger gennemsigtigt ovenpå, indtil man ruller */
body.hero-fuld .top { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: #f5f0e8; border-color: transparent; transition: background .5s var(--ease), color .5s var(--ease), border-color .5s; }
body.hero-fuld .top.rullet { background: color-mix(in srgb, var(--papir) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--blaek); border-color: var(--linje); }
body.hero-fuld .top:not(.rullet) .logo-lys-flade { display: none; }
body.hero-fuld .top:not(.rullet) .logo-moerk-flade { display: block; }
body.hero-fuld .top:not(.rullet) .top-book:hover { background: #f5f0e8; color: #000000; border-color: #f5f0e8; }

/* hero i fuld skærm */
.hero-skaerm { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; color: #f5f0e8; background: #000000; }
.hero-halvdele { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--papir); }
.skaerm-film, .hero-foto { position: relative; height: 100%; overflow: hidden; }
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; animation: ind-langsomt 2.4s .25s var(--ease) both; }
@media (max-width: 760px) { .hero-halvdele { grid-template-columns: 1fr; } .hero-foto { display: none; } }
.skaerm-film video { animation: ind-langsomt 2.4s var(--ease) both; }
@keyframes ind-langsomt { from { opacity: 0; transform: scale(1.04); } }
.hero-skaerm::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .62) 100%); pointer-events: none; }
.hero-bund { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding: 0 clamp(1.25rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 3rem); }
.hero-sted { font: 400 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; opacity: .85; }
.hero-skaerm h1 { font-size: clamp(2.4rem, 5.2vw, 4.6rem); font-weight: 300; margin: 0; color: #fbf8f3; }
.hero-skaerm h1 em { color: inherit; }
.hero-link { font: 400 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .9rem 0; border-bottom: 1px solid rgba(245, 240, 232, .5); white-space: nowrap; transition: border-color .3s; }
.hero-link:hover { border-color: #f5f0e8; }
.hero-skaerm .film-knap { right: clamp(1.25rem, 3vw, 2.5rem); bottom: auto; top: 6rem; }

/* udsagn */
.udsagn { max-width: 52rem; margin: 0 auto; padding: clamp(5rem, 12vw, 10rem) var(--gut); text-align: center; }
.udsagn p { font: 300 clamp(1.55rem, 2.7vw, 2.35rem)/1.38 var(--serif); color: var(--blaek); text-wrap: balance; }
.udsagn .udsagn-linje { font: 400 .74rem/1.8 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--graa); margin-top: 2.5rem; }
.udsagn-linje i { font-style: normal; margin: 0 .7rem; color: var(--accent); }

/* diptykon */
.diptykon { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--papir); }
.dip-felt { position: relative; display: block; height: min(92svh, 62rem); min-height: 28rem; overflow: hidden; color: #f5f0e8; text-decoration: none; background: #000000; }
.dip-felt img { object-position: 50% 30%; }
.dip-felt img, .dip-felt .film, .dip-felt video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.dip-felt:hover img, .dip-felt:hover video { transform: scale(1.03); }
.dip-felt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .55) 100%); pointer-events: none; }
.dip-tekst { position: absolute; left: 0; right: 0; bottom: clamp(1.6rem, 3.5vw, 2.6rem); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; }
.dip-titel { font: 400 clamp(1.5rem, 2.2vw, 2rem)/1 var(--serif); }
.dip-under { font: 400 .74rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.dip-felt .film-knap { top: 1rem; bottom: auto; }
@media (max-width: 760px) { .diptykon { grid-template-columns: 1fr; } .dip-felt { height: 78svh; } }

/* behandlinger som menukort */
.menu-sek { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.menu-hoved { position: sticky; top: 7rem; }
.menu-hoved p { color: var(--graa); }
.menu { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--blaek); }
.menu li { border-bottom: 1px solid var(--linje); }
.menu a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "navn pris" "besk pris"; gap: .3rem 2rem; padding: 1.6rem 0; text-decoration: none; transition: padding .45s var(--ease); }
.menu a:hover { padding-left: .8rem; }
.menu a { color: var(--blaek); }
.m-navn { grid-area: navn; font: 400 clamp(1.5rem, 2.2vw, 1.95rem)/1.1 var(--serif); }
.m-besk { grid-area: besk; font-size: .92rem; color: var(--graa); display: flex; flex-direction: column; }
.m-besk small { font-size: .78rem; opacity: .8; margin-top: .15rem; }
.m-pris { grid-area: pris; align-self: center; font-size: .9rem; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
@media (max-width: 900px) { .menu-sek { grid-template-columns: 1fr; } .menu-hoved { position: static; } }

/* facaden som afslutning */
.facade { position: relative; min-height: min(92svh, 56rem); display: flex; align-items: center; overflow: hidden; isolation: isolate; color: #f5f0e8; }
.facade-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.facade::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, .1) 75%); }
.facade-kort { max-width: 30rem; margin-left: max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut))); padding-block: 5rem; }
.facade-kort h2 { color: #fbf8f3; }
.facade-kort p, .facade-kort p a { color: rgba(245, 240, 232, .88); }
.tider.lys th, .tider.lys td { border-color: rgba(245, 240, 232, .2); color: rgba(245, 240, 232, .9); }

/* roligere detaljer generelt */
.etiket::before { width: 1.4rem; }
.knap { font-size: .72rem; letter-spacing: .18em; min-height: 3rem; padding: .8rem 1.6rem; }
[data-tema="noir"] .top-book:hover { background: #ece7df; color: #0f0e0d; }

/* forsidens hero: ét billede i fuld skærm med en meget langsom indzoomning */
.hero-fuldfoto { position: absolute; inset: 0; overflow: hidden; }
.hero-fuldfoto img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; transform-origin: 60% 45%; animation: ind-langsomt 2s var(--ease) both, zoom-langsomt 28s 0s ease-out both; }
@keyframes zoom-langsomt { from { transform: scale(1.09); } to { transform: scale(1); } }
@media (max-width: 760px) { .hero-fuldfoto img { object-position: 64% 50%; } }
.baand { margin: 0; }
.baand img { width: 100%; height: min(86svh, 54rem); object-fit: cover; object-position: 55% 55%; }
.baand figcaption { padding: 1.1rem var(--gut) 0; text-align: center; font: italic 400 1.15rem/1.4 var(--serif); color: var(--graa); }
.side-film .film { height: clamp(16rem, 44vw, 34rem); }

/* film i stående format ved siden af tekst */
.i-stolen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.stol-film { margin: 0; justify-self: center; width: min(100%, 26rem); }
.film.staaende { aspect-ratio: 9 / 16; }
@media (max-width: 760px) { .i-stolen { grid-template-columns: 1fr; } .stol-film { width: min(100%, 22rem); } }
/* desktop: tekst flugter med filmens top, og filmen bliver stående (sticky), mens man ruller forbi */
@media (min-width: 761px) {
  .i-stolen { align-items: start; }
  .i-stolen > div > .etiket:first-child { margin-top: 0; }
  .stol-film { position: sticky; top: 7rem; width: min(100%, 26rem, calc((100svh - 9rem) * 9 / 16)); }
}

/* fire salonbilleder side om side med hvid streg imellem */
.fire { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: #fff; border-block: 4px solid #fff; }
.fire figure { margin: 0; overflow: hidden; }
.fire img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.4s var(--ease); }
.fire figure:hover img { transform: scale(1.04); }
@media (max-width: 760px) { .fire { grid-template-columns: 1fr 1fr; } }


/* ===== Skuffemenu (08-11-2026): glider ind fra venstre; siden bag bliver mørk og sløret, og et foto fra den side,
   man peger på, toner frem i det mørke felt. Inspireret af modehusenes menuer. ===== */
.menu-knap { justify-self: start; display: inline-flex; align-items: center; gap: .85rem; background: none; border: 0; padding: .6rem 0; color: inherit; cursor: pointer; font: 400 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.burger { position: relative; width: 1.6rem; height: .7rem; }
.burger i { position: absolute; left: 0; height: 1px; background: currentColor; transition: width .5s var(--ease), transform .5s var(--ease); }
.burger i:first-child { top: 0; width: 100%; }
.burger i:last-child { bottom: 0; width: 62%; }
.menu-knap:hover .burger i:last-child { width: 100%; }
.nav-h { justify-self: end; }
.nav-h .kun-stor { font: 400 .8rem/1 var(--sans); letter-spacing: .04em; text-decoration: none; color: inherit; padding: .5rem 0; }
@media (max-width: 1040px) { .top-in { grid-template-columns: 1fr auto 1fr; } .top-book { display: inline-flex !important; } }
@media (max-width: 700px) { .kun-stor, .menu-ord { display: none; } .top-book { padding: .5rem .7rem !important; font-size: .62rem !important; } .logo img { height: 2.3rem; } }

.skuffe-bg { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .58); backdrop-filter: blur(8px) saturate(80%); -webkit-backdrop-filter: blur(8px) saturate(80%); opacity: 0; pointer-events: none; transition: opacity .7s var(--ease); }
.skuffe { position: fixed; top: 0; left: 0; bottom: 0; z-index: 90; width: min(36rem, 100vw); background: var(--papir); color: var(--blaek); display: flex; flex-direction: column; padding: 1.6rem clamp(1.6rem, 4vw, 3.4rem) 2.2rem; overflow-y: auto; transform: translateX(-101%); transition: transform .85s cubic-bezier(.77, 0, .18, 1); box-shadow: none; }
html.menu-aaben .skuffe { box-shadow: 0 0 80px rgba(0, 0, 0, .25); }
.forhaand { position: fixed; top: 0; bottom: 0; right: 0; left: min(36rem, 100vw); z-index: 85; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease) .15s; overflow: hidden; }
html.menu-aaben { overflow: hidden; }
html.menu-aaben .skuffe { transform: none; }
html.menu-aaben .skuffe-bg { opacity: 1; pointer-events: auto; }
html.menu-aaben .forhaand { opacity: 1; }

.skuffe-top { display: flex; align-items: center; height: 3rem; margin-bottom: clamp(1.5rem, 5vh, 3.5rem); }
.skuffe-luk { display: inline-flex; align-items: center; gap: .7rem; background: none; border: 0; padding: .5rem 0; cursor: pointer; color: inherit; font: 400 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.skuffe-luk svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform .6s var(--ease); }
.skuffe-luk:hover svg { transform: rotate(90deg); }

.skuffe-nav ol { list-style: none; margin: 0; padding: 0; }
.skuffe-nav li, .skuffe-sub, .skuffe-bund { opacity: 0; transform: translateX(-1.4rem); transition: opacity .6s var(--ease), transform .7s var(--ease); }
html.menu-aaben .skuffe-nav li, html.menu-aaben .skuffe-sub, html.menu-aaben .skuffe-bund { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * 55ms); }
.skuffe-nav a { display: flex; align-items: baseline; gap: 1.1rem; padding: .32rem 0; text-decoration: none; color: inherit; }
.skuffe-nav .nr { font: 400 .7rem/1 var(--sans); letter-spacing: .1em; color: var(--graa); width: 1.4rem; transition: color .4s; }
.skuffe-nav .t { position: relative; font: 300 clamp(2rem, 3.6vw, 2.9rem)/1.12 var(--serif); transition: transform .55s var(--ease), color .4s; }
.skuffe-nav .t::after { content: ''; position: absolute; left: 0; right: 0; bottom: .1em; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
.skuffe-nav a:hover .t, .skuffe-nav a:focus-visible .t { transform: translateX(.6rem); font-style: italic; }
.skuffe-nav a:hover .t::after, .skuffe-nav a[aria-current] .t::after { transform: scaleX(1); transform-origin: left; }
.skuffe-nav a:hover .nr { color: var(--blaek); }
.skuffe-nav ol:hover a:not(:hover) .t { color: var(--graa); }

.skuffe-sub { list-style: none; margin: clamp(1.8rem, 5vh, 3rem) 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--linje); display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1.5rem; }
.skuffe-sub a { font-size: .92rem; text-decoration: none; color: var(--blaek-2); display: inline-block; padding: .3rem 0; }
.skuffe-sub a:hover { color: var(--blaek); text-decoration: underline; text-underline-offset: .3em; }
.skuffe-bund { margin-top: auto; padding-top: 2rem; }
.skuffe-bund .knap { width: 100%; margin-bottom: 1.4rem; }
.skuffe-bund p { font-size: .88rem; color: var(--graa); margin: 0 0 .8rem; }
.skuffe-bund p a { color: inherit; }
.skuffe-soc { display: flex; gap: 1.4rem; }
.skuffe-soc a { font: 400 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--blaek); }

.forhaand figure { position: absolute; inset: 0; margin: 0; opacity: 0; clip-path: inset(0 0 0 12%); transition: opacity .9s var(--ease), clip-path 1.1s var(--ease); }
.forhaand figure.aktiv { opacity: 1; clip-path: inset(0 0 0 0); }
.forhaand img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s ease-out; filter: brightness(.82); }
.forhaand figure.aktiv img { transform: scale(1); }
.forhaand figcaption { position: absolute; left: clamp(2rem, 5vw, 4.5rem); bottom: clamp(2rem, 6vh, 4rem); color: #fff; font: italic 300 clamp(2.4rem, 5vw, 4.8rem)/1 var(--serif); opacity: 0; transform: translateY(1rem); transition: opacity .8s var(--ease) .2s, transform .9s var(--ease) .2s; }
.forhaand figure.aktiv figcaption { opacity: 1; transform: none; }
.forhaand::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 45%); pointer-events: none; }
.forhaand-slogan { position: absolute; right: clamp(2rem, 5vw, 4.5rem); top: clamp(1.8rem, 4vh, 2.6rem); z-index: 2; margin: 0; color: rgba(255, 255, 255, .85); font: 400 .78rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.forhaand-slogan em { font-style: normal; }
@media (max-width: 900px) { .forhaand { display: none; } .skuffe { width: 100vw; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .skuffe, .skuffe-bg, .forhaand, .forhaand figure, .forhaand img, .skuffe-nav li, .skuffe-sub, .skuffe-bund { transition: none !important; } }


/* ===== Logo (08-11-2026): til venstre ved menuen (standard), flydende fra hero til header på forsiden,
   stort ordmærke i footeren. Varianter til sammenligning: ?logo=midt og ?logo=lodret. ===== */
.top-in { grid-template-columns: auto auto 1fr; }
.top .logo { justify-self: start; margin-left: clamp(1.4rem, 3vw, 3rem); padding-left: clamp(1.4rem, 3vw, 3rem); border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 25%, transparent); }
.top .logo img { height: 3.4rem; }
@media (max-width: 700px) { .top-in { grid-template-columns: auto auto 1fr; } .top .logo { margin-left: 1rem; padding-left: 1rem; } .top .logo img { height: 2.4rem; } }
/* logoet flugter med sidens indhold (.ramme) i venstre side – men holder altid afstand til Menu */
@media (min-width: 701px) {
  .top-in { position: relative; grid-template-columns: auto 1fr; }
  .nav-h { justify-self: end; }
  [data-logo="midt"] .top-in { grid-template-columns: 1fr auto 1fr; }
  .top .logo { position: absolute; top: 50%; transform: translateY(-50%); margin: 0; padding: 0; border: 0;
    left: max(10.5rem, calc((100% - var(--max)) / 2 + var(--gut))); }
  [data-logo="midt"] .top .logo { position: static; transform: none; }
}
[data-logo="midt"] .top-in { grid-template-columns: 1fr auto 1fr; }
[data-logo="midt"] .top .logo { justify-self: center; margin-left: 0; padding-left: 0; border-left: 0; }

/* forsiden: logoet starter stort i hero og svæver op på sin plads i headeren, mens man ruller (site.js) */
.hero-logo { position: fixed; left: 0; top: 0; z-index: 60; display: block; width: var(--hl-w, min(70vw, 62rem)); transform-origin: 0 0; will-change: transform; opacity: 0; transition: opacity 1.2s var(--ease); }
.hero-logo.klar { opacity: 1; }
.hero-logo img { width: 100%; height: auto; filter: drop-shadow(0 2px 24px rgba(0, 0, 0, .35)); transition: opacity .4s; }
.hero-logo .hl-moerk { position: absolute; inset: 0; opacity: 0; filter: none; }
.hero-logo.moerk .hl-lys { opacity: 0; }
.hero-logo.moerk .hl-moerk { opacity: 1; }
body.hero-fuld.logo-flyder .top .logo { visibility: hidden; }
[data-logo="lodret"] .hero-logo { display: none; }


/* variant: lodret logo langs venstre kant – som skiltet ved døren i Møllergade */
.lodret-logo { display: none; }
@media (min-width: 1041px) {
  [data-logo="lodret"] .top .logo { visibility: hidden; width: 0; margin: 0; padding: 0; border: 0; }
  [data-logo="lodret"] .lodret-logo { display: block; position: fixed; left: 4.9rem; top: 54%; z-index: 45; width: min(52vh, 24rem); transform: translate(-50%, -50%) rotate(-90deg); mix-blend-mode: difference; }
  [data-logo="lodret"] .lodret-logo img { width: 100%; height: auto; }
  [data-logo="lodret"] main, [data-logo="lodret"] [data-tv-del="footer"], [data-logo="lodret"] .foden { padding-left: 9.5rem; }
}

/* ===== Noir: sort-hvid variant til sammenligning (slås til med ?tema=noir, se tidlig.js) =====
   Samme layout; farverne vendes, fotos og film vises i sort-hvid, og champagne-sølv er eneste accent. */
.logo .logo-moerk-flade { display: none; }
[data-tema="noir"] {
  --papir: #0f0e0d; --papir-2: #181614; --hvid: #1d1b19;
  --blaek: #ece7df; --blaek-2: #c9c3ba; --graa: #9a938a;
  --linje: rgba(236, 231, 223, .14); --linje-lys: rgba(15, 14, 13, .2);
  --accent: #c8bba6; --accent-lys: #7d7364;
  color-scheme: dark;
}
[data-tema="noir"] .logo .logo-lys-flade { display: none; }
[data-tema="noir"] .logo .logo-moerk-flade { display: block; }
[data-tema="noir"] main img, [data-tema="noir"] .film video { filter: grayscale(1) contrast(1.06) brightness(.96); }
[data-tema="noir"] .maerke img { filter: invert(1) grayscale(1) brightness(1.4); }
[data-tema="noir"] .sek-moerk p { color: rgba(15, 14, 13, .74); }
[data-tema="noir"] .sek-moerk h2, [data-tema="noir"] .citat p { color: #0f0e0d !important; }
[data-tema="noir"] .afslut { color: #f1ece4; }
[data-tema="noir"] .afslut h2 { color: #fbf8f3; }
[data-tema="noir"] .afslut::before { background: linear-gradient(90deg, rgba(8, 8, 7, .92) 0%, rgba(8, 8, 7, .66) 45%, rgba(8, 8, 7, .3) 100%); }
[data-tema="noir"] .afslut .etiket.lys { color: #c8bba6; }
[data-tema="noir"] .knap-lys { background: #f1ece4; color: #0f0e0d; border-color: #f1ece4; }
[data-tema="noir"] .knap-lys:hover { background: #c8bba6; border-color: #c8bba6; }
[data-tema="noir"] .knap-kant-lys { color: #f1ece4; border-color: rgba(241, 236, 228, .35); }
[data-tema="noir"] .knap-kant-lys:hover { background: #f1ece4; color: #0f0e0d; }
[data-tema="noir"] .foden { background: #080807; }
[data-tema="noir"] .foden h2 { color: #c8bba6; }
[data-tema="noir"] .foden .tider th, [data-tema="noir"] .foden .tider td { border-color: rgba(241, 236, 228, .16); }
[data-tema="noir"] .presse { border-color: var(--linje); }

/* lister og undertitler i læsetekst (gamle tekster fra nefertete.dk) */
.liste { list-style: none; padding: 0; margin: 0 0 1.4em; }
.liste li { position: relative; padding: .55rem 0 .55rem 1.6rem; border-bottom: 1px solid var(--linje); color: var(--blaek-2); }
.liste li::before { content: ''; position: absolute; left: 0; top: 1.25rem; width: .7rem; height: 1px; background: var(--accent); }
.undertitel { font-size: .74rem !important; letter-spacing: .16em; text-transform: uppercase; color: var(--accent) !important; margin-top: -.6rem; }
.brev .signatur { font-size: 1.6rem; line-height: 1.3; }

/* kontakt: ét bredt billede af disken i stedet for dør/vindue-parret */
.kontakt-bred { margin: clamp(3rem, 6vw, 5rem) 0 0; overflow: hidden; }
.kontakt-bred img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 58%; }
@media (max-width: 700px) { .kontakt-bred img { aspect-ratio: 4 / 3; } }

/* titler i to-spaltet layout (titel til venstre, tekst til højre) bliver stående, mens teksten ruller forbi – som menukortet */
@media (min-width: 901px) { .klaeb-titel { position: sticky; top: 7rem; } }
.klaeb-titel > p:not(.etiket) { color: var(--graa); max-width: 30em; }

/* ===== Mindre tomme flader (Jan, 09-11-2026): tekst og billeder side om side ===== */
.blokke { display: grid; gap: clamp(4rem, 9vw, 8rem); }
.blok { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; }
.blok.omvendt > .laesetekst { order: 2; }
.blok-fig { margin: 0; position: sticky; top: 7rem; }
.blok-fig img { width: 100%; height: auto; max-height: calc(100svh - 9rem); object-fit: cover; }
.blok-fig figcaption { font: italic 400 1.05rem/1.4 var(--serif); color: var(--graa); margin-top: .7rem; }
.blok-slut { max-width: 46rem; }
@media (max-width: 900px) { .blok { grid-template-columns: 1fr; } .blok.omvendt > .laesetekst { order: 0; } .blok-fig { position: static; } }
.efter-knapper { margin: 2.6rem 0 0; }
.efter-knapper img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.efter-knapper .film.kvadrat { max-width: 100%; }
@media (min-width: 901px) {
  .prisliste.to-spalter { columns: 2; column-gap: clamp(3rem, 7vw, 6rem); }
  .prisliste.to-spalter .prisafsnit { break-inside: avoid; }
  .prisliste.to-spalter > .note, .prisliste.to-spalter > .knapper { column-span: all; }
}

/* behandlingssider: prisblokken bliver stående, mens man læser teksten (top sættes af site.js, så høje blokke også kan ses helt) */
@media (min-width: 901px) { .klaeb-pris { position: sticky; top: 7rem; } }

/* hero: forklarende linje og to handlinger (Book tid · Se priser) */
.hero-under { font: 300 clamp(1rem, 1.3vw, 1.15rem)/1.5 var(--sans); max-width: 34em; margin: 1rem 0 0; opacity: .92; }
.hero-links { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; }
@media (max-width: 700px) { .hero-links { align-items: flex-start; flex-direction: row; gap: 1.4rem; } .hero-bund { flex-direction: column; align-items: flex-start; gap: 1.2rem; } }
/* mobil: Book tid-knappen læselig og med en komfortabel trykflade */
@media (max-width: 700px) { .top-book { font-size: .78rem !important; min-height: 44px; display: inline-flex !important; align-items: center; } }

/* stående film i to-spalte-blokke (Om, Stilletid) – passer til skærmhøjden */
.blok-fig .film.staaende { width: min(100%, calc((100svh - 9rem) * 9 / 16)); }
.blok.omvendt .blok-fig .film.staaende { margin-left: auto; }

/* ===== Kampagner (I.C.O.N) ===== */
.kamp-gitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 1000px) { .kamp-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kamp-gitter { grid-template-columns: 1fr; } }
.kamp { display: flex; flex-direction: column; }
.kamp-fig { position: relative; margin: 0 0 1.4rem; background: #fff; border: 1px solid var(--linje, #e6e6e6); aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.kamp-fig img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform 1.2s var(--ease); }
.kamp:hover .kamp-fig img { transform: scale(1.03); }
.kamp-maerke { position: absolute; top: .9rem; left: .9rem; background: var(--blaek); color: #fff; font: 500 .66rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: .55rem .7rem; }
.kamp-tekst h2 { font-size: clamp(1.45rem, 2vw, 1.8rem); margin: 0 0 .8rem; }
.kamp-priser { list-style: none; padding: 0; margin: 0 0 1rem; border-top: 1px solid var(--blaek); }
.kamp-priser li { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--linje, #e6e6e6); font-variant-numeric: tabular-nums; }
.kamp-priser .k-str { color: var(--graa); font-size: .9rem; }
.kamp-priser .k-pris { text-align: right; }
.kamp-priser .k-pris b { font-weight: 500; }
.kamp-priser .k-pris s { color: var(--graa); font-size: .85rem; margin-left: .35rem; }
.kamp-priser .k-spar { font: 500 .68rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.kamp-tekst p { color: var(--blaek-2); font-size: .95rem; }
.kamp-pkt { font: 500 .7rem/1.6 var(--sans) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--graa) !important; }
.kamp-fig picture { display: contents; }
.kamp-fig img { position: absolute; inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; }

/* Kampagner: kort budskab i store bogstaver */
body[data-side="kampagner"] .side-hoved .ingress, body[data-side="kampagner"] .ingress { font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1.3 var(--serif); color: var(--blaek); max-width: 28em; }
body[data-side="kampagner"] .side-hoved { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.kamp-sek { padding-top: 0; }

/* Arbejdet: én række resultatbilleder. Desktop side om side; mobil en vandret række med snap (kun CSS). */
.arbejdet { padding-block: var(--sek) 0; }
.arbejdet-hoved { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.arbejdet-hoved h2 { margin: 0; }
.arbejdet-hoved > div:last-child { max-width: 24rem; }
.arbejdet-hoved > div:last-child p { margin: 0 0 .6rem; color: var(--graa); }
.arbejdet-raekke { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 4px; }
.arbejdet-raekke figure { margin: 0; overflow: hidden; }
.arbejdet-raekke img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.4s var(--ease); }
.arbejdet-raekke figure:hover img { transform: scale(1.04); }
.arbejdet-raekke:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 1000px) and (min-width: 761px) { .arbejdet-raekke[style*="--n:6"] { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  .arbejdet-hoved { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .arbejdet-raekke { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding-inline: var(--gut); gap: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .arbejdet-raekke::-webkit-scrollbar { display: none; }
  .arbejdet-raekke figure { flex: 0 0 68vw; scroll-snap-align: start; }
}
[data-side="forside"] .arbejdet { padding-bottom: clamp(2.5rem, 6vw, 5rem); } /* luft før diptykonen, så to billedflader ikke støder sammen */
.dip-felt img.dip-lav { object-position: 50% 80%; } /* bænkbilledet er højt og smalt: vis skiltet, Anette og bænken, ikke taget */

/* ---------- Læsbarhed og mobil (10-11-2026) ---------- */
/* Gulv for småtekst: de mindste linjer bærer booking og troværdighed. */
.etiket { font-size: .8125rem; }
.top-book { font-size: .78rem !important; }
.hero-link { font-size: .95rem; }
.hero-sted, .udsagn .udsagn-linje, .dip-under { font-size: .8125rem; }
.m-besk small { font-size: .86rem; opacity: 1; }
.menu-knap { min-width: 44px; min-height: 44px; }
/* Forsidens H1 rummer både slogan og den forklarende linje (samme udseende som før). */
.hero-skaerm h1 .hero-slogan, .hero-skaerm h1 .hero-under { display: block; }
.hero-skaerm h1 .hero-under { letter-spacing: normal; text-wrap: pretty; }
/* Strammere indledning og lavere diptykoner på mobil. */
.udsagn { padding-bottom: clamp(3rem, 6vw, 5rem); }
@media (max-width: 760px) { .dip-felt { height: 58svh; } }
/* Behandlingssider på mobil: pris og booking lige under indledningen. */
.hurtig { display: none; }
.klaeb-pris { scroll-margin-top: 6rem; }
@media (max-width: 900px) {
  .hurtig { display: grid; grid-template-columns: 1fr auto; gap: .9rem 1rem; align-items: center; margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--linje); }
  .hurtig-pris { font-weight: 450; font-variant-numeric: tabular-nums lining-nums; }
  .hurtig-pris small { display: block; font-size: .86rem; font-weight: 350; color: var(--graa); }
  .hurtig .knap { min-height: 44px; }
  .hurtig .pil-link { grid-column: 1 / -1; justify-self: start; }
}
/* Hero: lidt mørkere midte, så logoets tynde øverste linje kan læses hen over stole og spejle. */
.hero-skaerm::after { background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .06) 24%, rgba(0, 0, 0, .2) 48%, rgba(0, 0, 0, .64) 100%); }

/* »Til toppen«: flydende knap nederst til højre. Skjult, til man er rullet en skærm ned (site.js sætter .synlig). */
.til-top { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40; width: 44px; height: 44px; display: grid; place-items: center; background: var(--papir); color: var(--blaek); border: 1px solid var(--blaek); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s .35s, background .3s, color .3s; }
.til-top.synlig { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.til-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: square; }
.til-top:hover { background: var(--blaek); color: var(--papir); }
.til-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.menu-aaben .til-top { visibility: hidden; }
@media print { .til-top { display: none !important; } }

/* Film + tekst side om side: filmen følger ikke længere med ned (ingen sticky), og billedet til højre fylder ud,
   så film og billede har samme over- og underkant. */
@media (min-width: 761px) {
  .i-stolen { align-items: stretch; }
  .i-stolen .stol-film { position: static; align-self: start; }
  .i-stolen > div { display: flex; flex-direction: column; }
  .i-stolen > div > .efter-knapper:not(.film-ramme) { position: relative; flex: 1 1 12rem; min-height: 12rem; margin-bottom: 0; }
  .i-stolen > div > .efter-knapper:not(.film-ramme) img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
}
/* Når hårrækken står lige over afslutningsbanneret: samme hvide skel vandret som mellem billederne. */
.arbejdet + .afslut { margin-top: 4px; }
@media (max-width: 760px) { .arbejdet + .afslut { margin-top: 6px; } }

/* »Rigtig Frisør« (DOFK) – lille og roligt, i sølv. */
.maerke-rf { margin: 1.75rem 0 2.5rem; }
.maerke-rf img { width: 9rem; height: auto; }
.foden-maerke { display: inline-block; margin-top: 1.5rem; }
.foden-maerke img { width: 7rem; height: auto; opacity: .92; transition: opacity .3s; }
.foden-maerke:hover img { opacity: 1; }

/* Produkter: de tre mærker side om side. */
.maerke-sek { padding-top: 0; }
.maerke-sek h2 { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.maerke-sek h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); padding-bottom: .9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--blaek); }
.maerke-sek p { color: var(--blaek-2); }
.top-book { white-space: nowrap; } /* »Book tid« må ikke brydes over to linjer på smalle skærme */

/* Forsiden: behandlingskortene (samme kort som på /behandlinger/). */
.forside-kort { padding-top: 0; }
.forside-kort-hoved { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.forside-kort-hoved h2 { margin: 0; }
@media (max-width: 760px) { .forside-kort-hoved { flex-direction: column; align-items: flex-start; gap: 1rem; } }
.kort { min-height: 15rem; } /* kortene har ingen prislinje længere – lidt lavere, så de ikke står tomme */
@media (max-width: 640px) { .kort { min-height: 0; } }
/* Forsiden: kun én afstand mellem behandlingsboksene og hårbillederne (før lå to oven i hinanden). */
.forside-kort { padding-bottom: 0; }
.forside-kort + .arbejdet { padding-top: clamp(3.5rem, 7vw, 6rem); }

/* Afbudspolitik: tegningen vises i fuld højde, så hverken hoved eller skilte skæres af. */
body[data-side="afbud"] .side-billede img { height: auto; object-fit: contain; }
body[data-side="afbud"] .side-hoved { padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
body[data-side="afbud"] .side-billede + .sek { padding-top: clamp(2rem, 4vw, 3.5rem); }

/* Mindre lodret luft mellem sektionerne på hele sitet (Jan, 10-11-2026).
   Før lå en sektions bundafstand og den næstes topafstand oven i hinanden (op til 304 px); nu er der én afstand på højst 88 px. */
:root { --sek: clamp(3.5rem, 6.5vw, 5.5rem); }
.sek + .sek, .sek + .arbejdet, .side-hoved + .sek { padding-top: 0; }
.prisnav + .sek, .fakta + .sek { padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.forside-kort + .arbejdet { padding-top: var(--sek); }
.udsagn { padding-top: clamp(3.5rem, 7vw, 6rem); }
.blokke { gap: clamp(3rem, 6vw, 5rem); }
.presse, .afslut-in { padding-block: clamp(3.5rem, 6.5vw, 5.5rem); }
.side-hoved { padding-top: clamp(3rem, 6vw, 5rem); }