/* Salon Alva — fælles stil for alle sider. Drenched salvie, alt skarpt, to nuancer grønt. */
:root{
  --salvie:#B9C8B4;
  --dyb:#A2B49C;
  --moerk:#1D2C22;
  --skrift:"Source Sans 3",system-ui,sans-serif;
  --display:"Familjen Grotesk",system-ui,sans-serif;
  --ramme:1200px;
  --side:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light;scrollbar-color:var(--moerk) var(--salvie)}
body{
  background:var(--salvie);
  color:var(--moerk);
  font-family:var(--skrift);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  accent-color:var(--moerk);
}
::selection{background:var(--moerk);color:var(--salvie)}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--moerk);outline-offset:4px}
img{display:block;max-width:100%;height:auto;background:var(--dyb)}
h1,h2,h3{text-wrap:balance}
h2{font-family:var(--display);font-weight:700;font-size:40px;line-height:1.05;letter-spacing:-0.02em}
h3{font-family:var(--skrift);font-weight:600;font-size:20px;line-height:1.3}
p{max-width:34em}

.ramme{max-width:var(--ramme);margin-inline:auto;padding-inline:var(--side)}

/* Springlink */
.spring{
  position:fixed;top:-120px;left:0;z-index:20;
  background:var(--moerk);color:var(--salvie);
  padding:16px 24px;min-height:48px;display:inline-flex;align-items:center;
  font-weight:600;text-decoration:none;
  transition:top .16s ease-out;
}
.spring:focus,.spring:focus-visible{top:0}

/* Bånd øverst */
.eksempel-baand{
  background:var(--moerk);color:var(--salvie);
  font-size:14px;line-height:1.4;text-align:center;
  padding:8px var(--side);
}
.eksempel-baand p{max-width:none}

/* Top */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px;flex-wrap:wrap}
.top a{display:inline-flex;align-items:center;min-height:44px}
.top-navn{
  font-family:var(--display);font-weight:700;font-size:32px;line-height:1;
  letter-spacing:-0.05em;text-decoration:none;
}
.top-hoejre{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tlf{font-weight:600;font-size:18px;text-decoration:none;text-underline-offset:6px}
.tlf:hover{text-decoration:underline}

/* Sidelinje: kun en streg over, små bogstaver, prik ved den side man er på */
.sidelinje{border-top:1.5px solid var(--moerk)}
.sidelinje ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 24px}
.sidelinje a{
  display:inline-flex;align-items:center;min-height:48px;
  text-decoration:none;font-size:17px;padding-block:8px;
}
.sidelinje a:hover{text-decoration:underline}
.sidelinje a[aria-current="page"]{font-weight:600;text-decoration:underline;text-decoration-thickness:2.5px}

/* Knappen, én farve på hele siden */
.knap{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:0 24px;
  background:var(--moerk);color:var(--salvie);
  font-family:var(--skrift);font-weight:600;font-size:18px;
  text-decoration:none;border:2px solid var(--moerk);
}
.knap:hover{background:transparent;color:var(--moerk)}

/* Første skærm på forsiden */
.hero{display:grid;grid-template-columns:1fr;gap:32px;padding-block:32px 48px;align-items:end}
.hero-tekst{display:flex;flex-direction:column;gap:24px}
.maerke{
  font-family:var(--display);font-weight:700;
  font-size:clamp(120px,32vw,300px);line-height:.85;letter-spacing:-0.06em;
  margin-left:-0.06em;
  transition:letter-spacing .25s ease-out;
}
.hero:has(.knap:hover) .maerke{letter-spacing:calc(-0.06em - 2px)}
.hero h1{font-size:24px;font-weight:400;line-height:1.3}
.hero-foto{aspect-ratio:2/3;width:100%;object-fit:cover}

/* Sidehoved på undersider */
.sidetop{padding-block:32px 40px;display:grid;gap:16px}
.sidetop h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(56px,14vw,128px);line-height:.85;letter-spacing:-0.05em;
  margin-left:-0.04em;
}
.sidetop p{font-size:20px;line-height:1.45;max-width:32em}

/* Priser som typografi */
.priser{background:var(--dyb);padding-block:48px}
.priser h2{margin-bottom:32px}
.prisliste{list-style:none;border-top:2px solid var(--moerk)}
.prisliste li{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:16px;
  padding:24px 0;border-bottom:2px solid var(--moerk);
}
.prisliste .navn{font-family:var(--display);font-weight:700;font-size:40px;line-height:1;letter-spacing:-0.02em}
.prisliste .pris{font-family:var(--display);font-weight:700;font-size:40px;line-height:1;letter-spacing:-0.02em;white-space:nowrap}
.prisliste .pris small{font-family:var(--skrift);font-weight:400;font-size:18px;letter-spacing:0;margin-right:8px}
.prisliste .om{grid-column:1/-1;margin-top:8px;font-size:18px}
.priser-note{margin-top:24px}

/* Forskudt fotopar */
.par{padding-block:48px;display:grid;gap:48px}
.par figure{display:grid;gap:16px}
.par img{aspect-ratio:3/2;width:100%;object-fit:cover}
.par figcaption{font-size:18px}

/* Galleri */
.salonen{padding-block:48px}
.salonen h2{margin-bottom:8px}
.salon-intro{max-width:44ch;margin-bottom:32px}
.galleri{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 16px}
.galleri figure{display:grid;gap:12px}
.galleri img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--dyb)}
.galleri .bred{grid-column:1/-1}
.galleri .bred img{aspect-ratio:3/2}
.galleri figcaption{font-size:15px;line-height:1.45}

/* Tekst og foto ved siden af hinanden */
.om-salonen{padding-block:48px}
.om-salonen .ramme{display:grid;gap:32px}
.om-salonen img{aspect-ratio:3/2;width:100%;object-fit:cover}
.om-tekst{display:flex;flex-direction:column;gap:16px}
.om-salonen.vendt .ramme{direction:ltr}

/* Trin på række, sat som tal i display-skriften */
.trin{padding-block:48px}
.trin h2{margin-bottom:32px}
.trin ol{list-style:none;display:grid;gap:32px;counter-reset:t}
.trin li{counter-increment:t;border-top:2px solid var(--moerk);padding-top:16px;display:grid;gap:8px}
.trin li::before{
  content:counter(t);font-family:var(--display);font-weight:700;
  font-size:56px;line-height:.9;letter-spacing:-0.04em;
}
.trin p{font-size:17px}
.trin > p{margin-top:40px;font-size:18px}

/* Spørgsmål og svar */
.spoerg{padding-block:48px;background:var(--dyb)}
.spoerg h2{margin-bottom:32px}
.spoerg dl{max-width:46em}
.spoerg dt{font-weight:600;font-size:20px;margin-top:24px}
.spoerg dt:first-child{margin-top:0}
.spoerg dd{margin-top:8px;max-width:34em}

/* Anmeldelsesplads */
.ord{padding-block:48px}
.ord-plads{
  border:2px dashed var(--moerk);padding:32px 24px;
  display:flex;flex-direction:column;gap:16px;
}
.ord-plads p{font-size:24px;line-height:1.3;max-width:24em}

/* Tider og adresse */
.tider{background:var(--dyb);padding-block:48px}
.tider .ramme{display:grid;gap:32px}
.tider h2{margin-bottom:16px}
.tider dl{display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:8px}
.tider dt{font-weight:600}
.tider address{font-style:normal;display:flex;flex-direction:column;gap:8px}
.tider .knap{align-self:start;margin-top:8px}

/* Videre til de andre sider */
.videre{padding-block:48px}
.videre h2{font-size:32px;margin-bottom:24px}
.videre ul{list-style:none;display:grid;border-top:1.5px solid var(--moerk)}
.videre li{border-bottom:1.5px solid var(--moerk)}
.videre a{display:grid;gap:4px;padding:24px 0;text-decoration:none}
.videre a:hover b{text-decoration:underline;text-decoration-thickness:2px}
.videre b{font-family:var(--display);font-weight:700;font-size:32px;line-height:1;letter-spacing:-0.03em}
.videre span{font-size:17px}

/* Fod */
.fod{padding-block:32px 48px;font-size:16px;display:flex;flex-direction:column;gap:8px;border-top:1.5px solid var(--moerk);margin-top:16px}
.fod p{max-width:none}

/* Ét bredt foto alene i en sektion */
.fotosektion{padding-block:48px}
.fotosektion h2{margin-bottom:24px}
.storfoto{width:100%;aspect-ratio:3/2;object-fit:cover}

@media (min-width:768px){
  :root{--side:40px}
  h2{font-size:56px}
  .top{padding-block:24px}
  .top-navn{font-size:40px}
  .hero{grid-template-columns:5fr 7fr;gap:64px;padding-block:48px 96px;align-items:end}
  .hero h1{font-size:28px}
  .sidetop{padding-block:56px 72px;grid-template-columns:7fr 5fr;gap:32px 64px;align-items:end}
  .sidetop p{font-size:22px}
  .priser{padding-block:96px}
  .priser h2{margin-bottom:48px}
  .prisliste li{grid-template-columns:minmax(0,5fr) minmax(0,7fr) auto;column-gap:32px;padding:32px 0}
  .prisliste .navn,.prisliste .pris{font-size:64px}
  .prisliste .om{grid-column:2;margin-top:0;align-self:baseline}
  .par{padding-block:96px;grid-template-columns:repeat(12,1fr);gap:0 32px}
  .par figure{grid-template-columns:subgrid;align-items:end}
  .par figure:first-child{grid-column:1/12}
  .par figure:first-child img{grid-column:1/8}
  .par figure:first-child figcaption{grid-column:8/12}
  .par figure:last-child{grid-column:2/13;margin-top:96px}
  .par figure:last-child img{grid-column:5/12;grid-row:1}
  .par figure:last-child figcaption{grid-column:1/5;grid-row:1}
  .salonen{padding-block:96px}
  .salon-intro{font-size:20px;margin-bottom:48px}
  .galleri{grid-template-columns:repeat(6,1fr);gap:48px 32px;align-items:start}
  .galleri .bred{grid-column:span 3}
  .galleri figure:nth-child(4){grid-column:4/7}
  .galleri figure:nth-child(7){grid-column:2/5}
  .galleri figcaption{font-size:17px}
  .om-salonen{padding-block:96px}
  .om-salonen .ramme{grid-template-columns:5fr 7fr;gap:64px;align-items:center}
  .om-salonen.vendt .ramme{grid-template-columns:7fr 5fr}
  .om-salonen.vendt img{order:-1}
  .trin{padding-block:96px}
  .trin ol{grid-template-columns:repeat(3,1fr);gap:48px}
  .spoerg{padding-block:96px}
  .spoerg .ramme{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .spoerg h2{margin-bottom:0}
  .ord{padding-block:96px}
  .ord-plads{padding:48px}
  .ord-plads p{font-size:32px}
  .tider{padding-block:96px}
  .tider .ramme{grid-template-columns:1fr 1fr;gap:64px}
  .videre{padding-block:96px}
  .videre a{grid-template-columns:1fr 1fr;gap:32px;align-items:baseline}
  .fotosektion{padding-block:96px}
  .fod{padding-block:48px 64px;flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:16px 32px}
}

@media (prefers-reduced-motion:reduce){
  .maerke,.spring{transition:none}
}