/* Klinik Birk - faelles stil. Porcelaen og dyb petrol, alt skarpt, etiketspalte til venstre. */
:root{
  --papir:#EBE3E8;
  --hvidt:#FBF8FA;
  --flade:#DFD3DA;
  --streg:#C2B2BC;
  --blaek:#221E22;
  --daempet:#514541;
  --petrol:#0F5257;
  --brod:"Public Sans",system-ui,sans-serif;
  --stor:"Schibsted Grotesk","Public Sans",system-ui,sans-serif;
  --maal:1200px;
  --kant:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light}
body{background:var(--papir);color:var(--blaek);font-family:var(--brod);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;accent-color:var(--petrol)}
::selection{background:var(--petrol);color:var(--hvidt)}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:5px}
:focus-visible{outline:3px solid var(--petrol);outline-offset:3px}
img{display:block;max-width:100%;height:auto;background:var(--flade)}
h1,h2,h3{text-wrap:balance;font-family:var(--stor);font-weight:700;letter-spacing:-.025em}
h1{font-size:clamp(40px,8.5vw,68px);line-height:1.02}
h2{font-size:clamp(28px,4.5vw,38px);line-height:1.1}
h3{font-family:var(--brod);font-weight:600;font-size:18px;line-height:1.45;letter-spacing:0}
p{max-width:36em}

.ark{max-width:var(--maal);margin-inline:auto;padding-inline:var(--kant)}
.blok{padding-block:48px}
.dyb{background:var(--flade)}

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

/* Oplysningsbaandet */
.noten{background:var(--petrol);color:var(--hvidt);font-size:14px;line-height:1.5;padding:8px var(--kant);text-align:center}
.noten p{max-width:none}

/* Hoved */
.pande{border-bottom:1px solid var(--streg)}
.pande .ark{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;padding-block:16px}
.hus{font-family:var(--stor);font-weight:700;font-size:26px;line-height:1.2;letter-spacing:-.03em;text-decoration:none;margin-right:auto;display:inline-flex;align-items:center;min-height:44px}
.hus:hover{color:var(--petrol)}
.tlfnummer{font-weight:600;font-size:18px;text-decoration:none;display:inline-flex;align-items:center;min-height:48px;white-space:nowrap}
.tlfnummer:hover{text-decoration:underline}
.ruter{flex:1 1 100%;border-top:1px solid var(--streg);margin-top:8px}
.ruter ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 24px}
.ruter a{display:inline-flex;align-items:center;min-height:48px;text-decoration:none;font-size:16px;color:var(--daempet)}
.ruter a:hover{color:var(--blaek);text-decoration:underline}
.ruter a[aria-current="page"]{color:var(--petrol);font-weight:600;box-shadow:inset 0 -3px 0 var(--petrol)}

/* Handlingen, en farve paa hele siden */
.gaa{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  background:var(--petrol);color:var(--hvidt);font-family:var(--brod);font-weight:600;font-size:17px;
  text-decoration:none;border:1px solid var(--petrol);white-space:nowrap}
.gaa:hover{background:transparent;color:var(--petrol)}

/* Forsidens foerste skaerm: overskrift i fuld bredde, billedbaelte under */
.indgang{padding-block:40px 0}
.indgang-ord{display:flex;flex-direction:column;gap:24px;align-items:flex-start;padding-bottom:40px}
.indgang h1{max-width:16ch}
.indgang p{font-size:19px;max-width:32em}
.baelte img{width:100%;aspect-ratio:3/2;object-fit:cover}
.baelte figcaption{padding-block:16px;font-size:16px;color:var(--daempet);border-bottom:1px solid var(--streg)}

/* Sidehoved paa undersider */
.sidepande{padding-block:40px 32px;display:grid;gap:16px}
.sidepande p{font-size:19px;color:var(--daempet);max-width:34em}

/* Etiketspalte: overskrift til venstre, indhold til hoejre, haarstreg over */
.rubrik{border-top:1px solid var(--streg);position:relative}
.rubrik::before{content:"";position:absolute;top:-2px;left:0;width:100%;height:3px;background:var(--petrol);transform:scaleX(0);transform-origin:left}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rubrik::before{animation:stregen linear both;animation-timeline:view();animation-range:entry 10% entry 70%}
  }
}
@keyframes stregen{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rubrik > .ark{display:grid;gap:24px;padding-block:32px 48px}
.rubrik h2{margin-bottom:0}

/* Behandlinger med hvert sit billede */
.ydelser{list-style:none;display:grid;gap:32px}
.ydelse{display:grid;gap:16px;grid-template-columns:96px 1fr;align-items:start}
.ydelse img{width:96px;aspect-ratio:1/1;object-fit:cover}
.ydelse .ydelsesord{display:grid;gap:8px}
.ydelse h3{font-family:var(--stor);font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.02em}
.ydelse .ydelsesom{font-size:16px;color:var(--daempet)}
.ydelse .ydelsespris{font-size:16px;font-weight:600}
.ydelse .ydelsespris span{font-weight:400;color:var(--daempet)}
.efterskrift{margin-top:32px;font-size:16px;color:var(--daempet)}

/* Tekst og billede ved siden af hinanden */
.sidestillet{display:grid;gap:24px}
.sidestillet img{width:100%;aspect-ratio:3/2;object-fit:cover}
.sidestillet .broed{display:flex;flex-direction:column;gap:16px;align-items:flex-start}

/* Trin med lodret streg */
.forloeb{list-style:none;display:grid;gap:24px;border-left:1px solid var(--streg);padding-left:24px}
.forloeb li{display:grid;gap:8px;position:relative}
.forloeb li::before{content:"";position:absolute;left:-29px;top:10px;width:9px;height:9px;background:var(--petrol)}
.forloeb p{font-size:16px;color:var(--daempet)}

/* Spoergsmaal */
.spoergedel dt{font-weight:600;font-size:18px;margin-top:24px}
.spoergedel dt:first-of-type{margin-top:0}
.spoergedel dd{margin-top:8px;color:var(--daempet);max-width:36em}

/* Pladsen til kundernes ord */
.udtalelser .tom{border:1px solid var(--streg);padding:24px;display:grid;gap:16px;background:var(--papir)}
.udtalelser p{font-size:20px;line-height:1.4;max-width:28em;color:var(--daempet)}

/* Tider og adresse */
.adresseblok{display:grid;gap:32px}
.adresseblok dl{display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:8px;max-width:26em}
.adresseblok dt{font-weight:600}
.adresseblok dd{color:var(--daempet)}
.adresseblok address{font-style:normal;display:flex;flex-direction:column;gap:8px;align-items:flex-start}

/* Billedraekke */
.raekken{list-style:none;display:grid;gap:24px}
.raekken figure{display:grid;gap:16px}
.raekken img{width:100%;aspect-ratio:3/2;object-fit:cover}
.raekken figcaption{font-size:16px;color:var(--daempet)}

/* Videre */
.fortsaet{list-style:none;display:grid;border-top:1px solid var(--streg)}
.fortsaet li{border-bottom:1px solid var(--streg)}
.fortsaet a{display:grid;gap:8px;padding:24px 0;text-decoration:none}
.fortsaet a:hover b{color:var(--petrol)}
.fortsaet b{font-family:var(--stor);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.02em}
.fortsaet span{font-size:16px;color:var(--daempet)}

/* Foden */
.sokkel{border-top:1px solid var(--streg);margin-top:48px}
.sokkel .ark{padding-block:32px 48px;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--daempet)}
.sokkel p{max-width:none}
.sokkel a{color:var(--blaek)}

@media (min-width:900px){
  :root{--kant:40px}
  .blok{padding-block:80px}
  .pande .ark{padding-block:24px;gap:8px 40px}
  .hus{font-size:30px}
  .ruter{flex:0 1 auto;border-top:0;margin-top:0;margin-right:auto}
  .ruter a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--petrol)}
  .indgang{padding-block:72px 0}
  .indgang-ord{padding-bottom:64px}
  .indgang p{font-size:21px}
  .baelte img{aspect-ratio:12/5}
  .sidepande{padding-block:72px 48px;grid-template-columns:7fr 5fr;gap:24px 64px;align-items:end}
  .sidepande p{font-size:21px}
  .rubrik > .ark{grid-template-columns:3fr 9fr;gap:48px;padding-block:48px 80px}
  .ydelser{grid-template-columns:1fr 1fr;gap:40px 32px}
  .ydelse{grid-template-columns:120px 1fr;gap:24px}
  .ydelse img{width:120px}
  .sidestillet{grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  .adresseblok{grid-template-columns:1fr 1fr;gap:64px}
  .raekken{grid-template-columns:1fr 1fr;gap:40px}
  .udtalelser .tom{padding:40px}
  .udtalelser p{font-size:24px}
  .fortsaet a{grid-template-columns:5fr 7fr;gap:32px;align-items:baseline}
  .sokkel .ark{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;padding-block:40px 64px}
}

@media (prefers-reduced-motion:reduce){
  .forbi{transition:none}
  .rubrik::before{transform:scaleX(1)}
}