/* ---------- Tokens ---------- */
:root {
  --canvas: #f2f8ff;
  --ink: #002fa7;
  --muted: #a0a0a0;                      /* kontrast 2,5:1 – diskret, men læsbar */
  --ink-hover: #617fca;                  /* --ink blandet 60/40 med canvas – kontrast 3,6:1 */
  --gutter: clamp(16px, 2.5vw, 36px);   /* afstand til kanterne – vokser med skærmen */
  --frame: min(62vmin, 680px);           /* kvadratets størrelse – vmin = den korteste side */
  --ease: cubic-bezier(.7, 0, .2, 1);    /* langsom start, blød landing */
  --fs: 18px;                            /* skriftstørrelse – sænkes på mindre skærme, se Tablet/Mobil */
  --lift: .05;                            /* optisk centrum – se .frame */
}

/* ---------- Basis (fælles for alle sider) ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;                     /* 55 Roman */
  font-size: var(--fs);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a { transition: color .25s ease; }
a:hover { color: var(--ink-hover); }
.legal a:hover,
.back:hover { color: var(--ink); }      /* grå links bliver blå ved hover */
a:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.logo {
  position: fixed;
  top: var(--gutter);
  left: var(--gutter);
  display: block;
  width: clamp(150px, 12vw, 240px);     /* styrer SVG'ens bredde */
  z-index: 1;
}
.logo svg { display: block; width: 100%; height: auto; }
.logo:hover { color: var(--ink); }      /* logoet skifter ikke farve */


/* Skjult visuelt, men tilgængelig for skærmlæsere og søgemaskiner.
   (display: none ville skjule den for alle – derfor dette standardmønster) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   FORSIDE  (body.home)
   ================================================================ */
.home {
  overflow: hidden;                     /* forsiden scroller aldrig */
}

/* Begge bundhjørner står på samme linje: samme bottom + samme line-height */
.contact,
.legal {
  position: fixed;
  bottom: var(--gutter);
  margin: 0;
  font-style: normal;                   /* <address> er kursiv som standard */
}
.contact {
  right: var(--gutter);
  /* Kolonnerne er så brede som deres indhold, med ens luft imellem –
     det er luften øjet læser, så den skal være ensartet */
  display: flex;
  gap: 1.75em;
  align-items: flex-end;                /* kolonnerne flugter i bunden */
}
.contact p { margin: 0; }

.legal { left: var(--gutter); color: var(--muted); }
.legal a { display: block; }           /* linket på sin egen linje */

/* ---------- Rammen + karusel ---------- */
.frame {
  /* Centreret i selve vinduet: fixed + inset: 0 spænder elementet ud over hele
     skærmen, og margin: auto fordeler den overskydende plads ligeligt
     på alle fire sider – så længe bredde og højde er låst. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: var(--frame);
  height: var(--frame);                 /* samme som bredden = kvadrat */

  /* Optisk centrum: løft kvadratet med en andel af den frie plads.
     (100dvh - kvadratet) = luften over + under tilsammen.
     --lift: 0   = matematisk centreret (50/50)
     --lift: .1  = 40 % luft over, 60 % under
     --lift: .15 = 35/65 */
  transform: translateY(calc((100dvh - var(--frame)) * var(--lift) * -1));
}

.slides {
  position: absolute;
  inset: 0;
  overflow: hidden;                     /* klipper billederne – ikke mærkets dele */
}

.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                    /* fylder kvadratet uden at forvrænge */
  opacity: 0;
  transition: opacity 1.4s ease;
}
.slide.is-active { opacity: 1; }

/* Mærket ligger oven på billederne i præcis samme størrelse.
   Uden JS (eller med reduceret bevægelse) er det skjult. */
.mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: visible;                    /* delene må gerne starte uden for kvadratet */
  pointer-events: none;
}

/* ---------- In-animation ----------
   Tidslinje (justér her):
   1. De fire dele glider ind udefra og samler sig til rammen
   2. Kort pause, så mærket kan nå at stå
   3. Mærket toner over i billederne
   4. Hjørnerne (logo, kontakt, firmainfo) toner ind */
:root {
  --in-dur:   1.8s;                     /* 1. hvor lang tid delene er om at komme ind */
  --in-dist:  30px;                     /* 1. hvor langt ude de starter (i viewBox-enheder, mærket er 129.71 bredt) */
  --stagger:  .1s;                      /* 1. forskydning mellem de fire dele */
  --x-start:  1.5s;                     /* 3. hvornår mærket begynder at tone over */
  --x-dur:    1.2s;                     /* 3. hvor lang tid overtoningen tager */
  --ui-start: 1.8s;                     /* 4. hvornår hjørnerne kommer */
}

.js .home .mark { display: block; color: var(--muted); }
.js .home .slides { opacity: 0; }
.js .home .mark polygon { opacity: 0; }
.js .home .logo,
.js .home .contact,
.js .home .legal { opacity: 0; transform: translateY(6px); }

/* 1. Delene: hver har sin egen startposition, alle ender i translate(0, 0) */
.mark-top    { --from: translate(0, calc(var(--in-dist) * -1)); --i: 0; }
.mark-right  { --from: translate(var(--in-dist), 0);            --i: 1; }
.mark-bottom { --from: translate(0, var(--in-dist));            --i: 2; }
.mark-left   { --from: translate(calc(var(--in-dist) * -1), 0); --i: 3; }

.js.is-ready .home .mark polygon {
  animation: piece-in var(--in-dur) cubic-bezier(.33, 0, .15, 1) forwards;  /* blød start, lang landing */
  animation-delay: calc(var(--i) * var(--stagger));
}

/* 3. Overtoning: mærket ud, billederne ind – samtidig */
.js.is-ready .home .mark {
  animation: fade-out var(--x-dur) ease-in-out forwards;
  animation-delay: var(--x-start);
}
.js.is-ready .home .slides {
  animation: fade-in var(--x-dur) ease-in-out forwards;
  animation-delay: var(--x-start);
}

/* 4. Hjørnerne */
.js.is-ready .home .logo,
.js.is-ready .home .contact,
.js.is-ready .home .legal {
  animation: fade-up 1s ease-out forwards;
  animation-delay: var(--ui-start);
}
.js.is-ready .home .legal   { animation-delay: calc(var(--ui-start) + .1s); }
.js.is-ready .home .contact { animation-delay: calc(var(--ui-start) + .2s); }

@keyframes piece-in {
  from { transform: var(--from); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translate(0, 0); opacity: 1; }
}
@keyframes fade-in  { to { opacity: 1; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up  { to { opacity: 1; transform: none; } }

/* ================================================================
   UNDERSIDE  (body.page) – fx Handelsbetingelser
   ================================================================ */
.page main {
  max-width: 36em;
  margin: 0 auto;
  padding: calc(var(--gutter) + 120px) var(--gutter) 96px;
}
.page h1,
.page h2,
.page h3 {
  font: inherit;                        /* samme snit og størrelse – hierarki via luft */
  margin: 0;
}
.page h1 { margin-bottom: 3em; }
.page h2 { margin-top: 2.6em; }
.page h3 { margin-top: 1.3em; color: var(--muted); }
.page p  { margin: 0 0 .9em; }
.page h2 + p, .page h3 + p { margin-top: .35em; }
.page h2 + h3 { margin-top: .35em; }

.back {
  display: inline-block;
  margin-top: 4em;
  color: var(--muted);
}

/* ---------- Mindre skærme ----------
   Breakpoints er målt ud fra hvornår bundhjørnerne ville ramme hinanden:
   ved 18px skal der ~900px til, ved 16px ~760px */
@media (max-width: 900px) {
  :root { --fs: 16px; }
}

/* Under 760px er der ikke plads til hjørnerne side om side på én linje,
   så de stables: kontakt i én kolonne, CVR på egen linje */
@media (max-width: 760px) {
  .contact { flex-direction: column; align-items: flex-end; gap: .9em; text-align: right; }
  .legal .cvr { display: block; }
  .legal .sep { display: none; }
}

/* ---------- Mobil ---------- */
@media (max-width: 600px) {
  :root {
    --gutter: 24px;                     /* matcher luften i iOS' egen UI */
    /* Kvadratet flugter med margenerne: fuld bredde minus margen i hver side.
       Men aldrig højere end vinduet minus ~260px til logo og bundtekst,
       så det ikke rammer hjørnerne på lave skærme. */
    --frame: min(calc(100vw - 2 * var(--gutter)), calc(100svh - 260px));
  }
  .home { --fs: 14px; }                 /* forsiden: hjørnerne skal kunne stå side om side */
  .page { --fs: 16px; }                 /* undersiden: brødtekst – 16px er god læsestørrelse på mobil */
  .logo { position: absolute; }         /* på undersiden: logoet scroller med væk */
  .home .logo { position: fixed; }
}

/* Smalle telefoner (under iPhone-standardbredden 390px) */
@media (max-width: 389px) {
  .home { --fs: 13px; }
}

/* Meget smalle telefoner (fx iPhone SE 1. gen, 320px) */
@media (max-width: 359px) {
  :root { --gutter: 20px; }
  .home { --fs: 12px; }
}

/* ---------- Respektér "reducer bevægelse" ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .home .mark { display: none; }
  .js .home .slides, .js .home .logo, .js .home .contact, .js .home .legal {
    opacity: 1; transform: none; animation: none !important;
  }
  .slide { transition: none; }
}