/* Vaerksted Ler: faelles stil for alle sider. Ophaengt billede, terracotta mod skifer. */
:root{
  --grund:#EEF0F2;
  --ramme:#FAFBFC;
  --skifer:#3E4A57;
  --skifer-dyb:#2C353F;
  --ler:#B9563A;
  --ler-moerk:#9E4730;
  --streg:#C9CFD5;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--grund);color:var(--skifer);font:400 17px/1.55 Karla,system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{background:var(--grund);min-height:100vh}
::selection{background:var(--ler);color:var(--ramme)}
:focus-visible{outline:3px solid var(--ler);outline-offset:3px}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
img{display:block;max-width:100%;height:auto;border-radius:2px;background:var(--streg)}
h1,h2{text-wrap:balance}
.hylde{width:min(100% - 48px,1200px);margin-inline:auto}

/* apport-bånd */
.apport-baand{background:var(--skifer);color:var(--grund);font-size:14px;line-height:1.4;text-align:center;padding:10px 24px}

/* top */
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 24px;padding:24px 0 8px}
.top .navn{font:400 20px/1.2 "Young Serif",Georgia,serif;color:var(--skifer-dyb);text-decoration:none;white-space:nowrap}
.top .tlf{font-weight:600;text-decoration:none;padding:12px 0;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}

/* ophængt billede */
.ophaeng{position:relative;padding:48px}
.ophaeng::before{content:"";position:absolute;inset:0;background:var(--ramme);border-radius:2px;transition:inset .35s cubic-bezier(.2,.7,.2,1)}
.ophaeng:hover::before{inset:8px}
.ophaeng picture{position:relative;display:block}
.ophaeng img{width:100%;aspect-ratio:3/2;object-fit:cover}

.aabning{padding:32px 0 0;max-width:640px}
.aabning h1{font:600 15px/1.4 Karla,sans-serif;letter-spacing:.01em;color:var(--skifer);margin-bottom:8px}
.aabning .stor{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:56px;font-size:clamp(34px,5vw,56px);line-height:1.08;color:var(--skifer-dyb);margin-bottom:16px}
.aabning p{max-width:56ch;margin-bottom:24px}

.knap{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;background:var(--ler);color:var(--ramme);font-weight:600;font-size:17px;text-decoration:none;border-radius:4px;border:0}
.knap:hover{background:var(--ler-moerk)}

section{padding-top:80px}
h2{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:40px;font-size:clamp(28px,3.4vw,40px);line-height:1.15;color:var(--skifer-dyb);margin-bottom:24px}

/* butikken: to rækker, forskellige størrelser */
.vaeg{display:grid;gap:24px;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.vaeg figure:nth-child(3){grid-column:1/2}
.vaeg figure:nth-child(4){grid-column:2/3}
.vaeg .kvadrat{grid-column:1/2}
.vaeg .bred{grid-column:2/3}
.vaeg .kvadrat img{aspect-ratio:1/1;object-fit:cover}
.vaeg .bred img{aspect-ratio:3/2;object-fit:cover}
.vaeg figcaption{font-size:15px;padding-top:8px;color:var(--skifer)}
.vaeg figure{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.vaeg img{width:100%}
.maerke{font-size:14px;margin-top:16px;color:var(--skifer)}
.trin-raekke{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
.trin-raekke figure{margin:0}
.trin-raekke img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;background:var(--ramme)}
.trin-raekke figcaption{font-size:15px;padding-top:8px;color:var(--skifer);line-height:1.5}
.trin-raekke figcaption b{color:var(--skifer-dyb);font-weight:600}

/* kurser som ren tekstliste */
.hold{list-style:none;border-top:1px solid var(--streg);max-width:760px}
.hold li{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:20px 0;border-bottom:1px solid var(--streg);align-items:baseline}
.hold strong{font-weight:600;font-size:18px;color:var(--skifer-dyb)}
.hold .pris{font:400 22px/1 "Young Serif",Georgia,serif;color:var(--ler-moerk);white-space:nowrap}
.hold p{grid-column:1/-1;font-size:16px;max-width:60ch}
.efter{margin-top:24px}

/* anmeldelsesplads */
.ord{background:var(--ramme);border-radius:2px;padding:48px 40px;max-width:760px}
.ord p{font:400 clamp(20px,2.2vw,26px)/1.35 "Young Serif",Georgia,serif;color:var(--skifer);max-width:28ch;text-wrap:balance}

/* find os */
.find{display:grid;grid-template-columns:1fr 1fr;gap:32px 48px;max-width:760px}
.find dl{display:grid;grid-template-columns:auto 1fr;gap:6px 24px}
.find dt{font-weight:600}
.find address{font-style:normal}
.find h3{font:600 20px/1.35 Karla,sans-serif;margin-bottom:12px;color:var(--skifer-dyb)}

footer{margin-top:80px;padding:32px 0 48px;border-top:1px solid var(--streg);font-size:15px;display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between}

@media (prefers-reduced-motion:reduce){.ophaeng::before{transition:none}.ophaeng:hover::before{inset:0}}

@media (min-width:768px){.trin-raekke{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}}
@media (max-width:767px){
  html{font-size:16px}
  .hylde{width:min(100% - 32px,1200px)}
  .ophaeng{padding:24px}
  .ophaeng:hover::before{inset:0}
  .top{padding-top:16px}
  section{padding-top:48px}
  .vaeg{grid-template-columns:minmax(0,1fr);gap:16px}
  .trin-raekke{gap:24px 16px}
  .vaeg figure,.vaeg .kvadrat,.vaeg .bred,.vaeg figure:nth-child(3),.vaeg figure:nth-child(4){grid-column:auto}
  .ord{padding:32px 24px}
  .find{grid-template-columns:1fr}
  footer{margin-top:48px;flex-direction:column}
  .knap{width:100%}
}

/* ---- faelles chrome paa alle sider ---- */
.spring-til{position:fixed;top:-120px;left:0;z-index:20;background:var(--ler);color:var(--ramme);padding:14px 24px;min-height:48px;display:inline-flex;align-items:center;font-weight:600;text-decoration:none;border-radius:0 0 4px 0;transition:top .2s ease-out}
.spring-til:focus,.spring-til:focus-visible{top:0}

.top .hoejre{display:flex;align-items:baseline;gap:16px 24px;flex-wrap:wrap}
.top .knap{width:auto;min-height:44px;padding:10px 20px;font-size:16px}

/* stier: navigation som serif-ord med terracotta prik under det aktive */
.stier{padding:8px 0 20px}
.stier ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 28px}
.stier a{display:inline-flex;align-items:center;min-height:44px;font-family:"Young Serif",Georgia,serif;font-size:18px;text-decoration:none;color:var(--skifer);position:relative}
.stier a:hover{color:var(--skifer-dyb);text-decoration:underline;text-underline-offset:6px}
.stier a[aria-current="page"]{color:var(--skifer-dyb)}
.stier a[aria-current="page"]::after{content:"";position:absolute;left:0;bottom:8px;width:14px;height:3px;border-radius:2px;background:var(--ler)}

/* sidehoved paa undersider */
.overskrift{padding:24px 0 8px;max-width:760px}
.overskrift h1{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:clamp(32px,4.6vw,52px);line-height:1.1;color:var(--skifer-dyb);margin-bottom:16px;text-wrap:balance}
.overskrift p{font-size:19px;max-width:56ch}
@media (max-width:767px){.overskrift p{font-size:18px}}

/* et bredt foto med tekst under */
.plakat{margin:0}
.plakat img{width:100%;aspect-ratio:3/2;object-fit:cover}
.plakat figcaption{font-size:15px;padding-top:12px;color:var(--skifer);max-width:60ch}

/* to fotos ved siden af hinanden */
.dobbelt{display:grid;gap:24px;grid-template-columns:1fr}
.dobbelt figure{margin:0;min-width:0}
.dobbelt img{width:100%;aspect-ratio:3/2;object-fit:cover}
.dobbelt figcaption{font-size:15px;padding-top:8px;color:var(--skifer)}
@media (min-width:768px){.dobbelt{grid-template-columns:1fr 1fr;gap:32px}}

/* tekst ved siden af et foto */
.tekstfoto{display:grid;gap:32px;grid-template-columns:1fr;align-items:start}
.tekstfoto>*{min-width:0}
.tekstfoto figure{margin:0}
.tekstfoto img{width:100%;aspect-ratio:1/1;object-fit:cover}
.tekstfoto figcaption{font-size:15px;padding-top:8px;color:var(--skifer)}
.tekstfoto p{max-width:58ch}
.tekstfoto p+p{margin-top:16px}
.tekstfoto h3{font-weight:600;font-size:19px;color:var(--skifer-dyb);margin:24px 0 8px}
@media (min-width:768px){.tekstfoto{grid-template-columns:5fr 7fr;gap:48px}}

/* spoergsmaal og svar */
.svar{border-top:1px solid var(--streg);max-width:720px}
.svar dt{font-weight:600;font-size:18px;color:var(--skifer-dyb);padding-top:24px}
.svar dd{padding:8px 0 24px;border-bottom:1px solid var(--streg);max-width:62ch}

/* naeste sider */
.naeste{padding-top:64px}
.naeste h2{font-size:clamp(22px,2.4vw,28px);margin-bottom:16px}
.naeste ul{list-style:none;display:grid;gap:0;border-top:1px solid var(--streg)}
.naeste li{border-bottom:1px solid var(--streg);min-width:0}
.naeste a{display:block;padding:20px 0;text-decoration:none}
.naeste b{display:block;font:400 22px/1.2 "Young Serif",Georgia,serif;color:var(--skifer-dyb)}
.naeste a:hover b{color:var(--ler-moerk)}
.naeste span{display:block;font-size:16px;margin-top:4px}
@media (min-width:768px){.naeste ul{grid-template-columns:1fr 1fr;column-gap:48px}}
@media (prefers-reduced-motion:reduce){.spring-til{transition:none}}