/* ==========================================================================
   Batteribranchen — styles.css
   Ren CSS, ingen build, ingen eksterne ressourcer.

   Indhold
   1.  Designtokens
   2.  Reset og basis
   3.  Typografi
   4.  Layout og sektioner
   5.  Knapper
   6.  Header og navigation
   7.  Hero
   8.  Om os (intro, citat, forklaring)
   9.  Fokusområder (kort)
   10. Medlemskab (mørk sektion)
   11. Kontakt
   12. Footer
   13. Bevægelse, reduced motion og print
   ========================================================================== */


/* 1. DESIGNTOKENS ========================================================= */

:root {
  /* Farver */
  --forest:      #173F35;  /* dyb skovgrøn — logo, overskrifter, mørke flader */
  --forest-deep: #10302A;  /* mørkere nuance til gradient og hover */
  --green:       #397A61;  /* grøn — linjer, ikoner, accenter */
  --green-dark:  #2C6149;  /* grøn i tekststørrelse (AA-kontrast) */
  --sage:        #DCE9E1;  /* lys salviegrøn — kanter, felter */
  --mist:        #F5F8F5;  /* meget lys grøn / off-white */
  --paper:       #FCFCF8;  /* varm hvid — sidens bund */
  --ink:         #18201D;  /* mørk tekst */
  --ink-soft:    #46564F;  /* dæmpet brødtekst (7.5:1 på varm hvid) */
  --ember:       #C58A2E;  /* varm energiaccent — bruges meget sparsomt */

  /* Flader */
  --line:        #DCE9E1;
  --line-strong: #C3D8CB;
  --card:        #FFFFFF;

  /* Typografi */
  --font-sans:   Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Arial, Helvetica, sans-serif;
  --font-serif:  Georgia, "Times New Roman", Times, serif;

  /* Mål */
  --wrap:        1200px;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --header-h:    4.25rem;
  --radius:      14px;
  --radius-sm:   8px;

  /* Skygger */
  --shadow-sm:   0 1px 2px rgba(23, 63, 53, .05);
  --shadow-md:   0 10px 30px -18px rgba(23, 63, 53, .45);
  --shadow-lg:   0 24px 60px -32px rgba(23, 63, 53, .5);
}


/* 2. RESET OG BASIS ======================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: clamp(1rem, .97rem + .16vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Sikkerhedsnet mod vandret scroll. `clip` frem for `hidden`, fordi
     `hidden` gør body til en scroll-container og bryder sticky-headeren. */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--green-dark); text-underline-offset: .18em; }

ul, ol { margin: 0; padding: 0; list-style: none; }

figure, blockquote, dl, dd { margin: 0; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; }

p { margin: 0; }

button { font: inherit; color: inherit; }

/* Fokus — altid synligt og med god kontrast */
:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--sage); }

::selection { background: var(--sage); color: var(--forest); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1.15rem;
  background: var(--forest);
  color: var(--paper);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }


/* 3. TYPOGRAFI ============================================================ */

h1, h2, h3,
.brand,
.pull blockquote p {
  font-family: var(--font-serif);
  color: var(--forest);
  letter-spacing: -.012em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 1.35rem + 3.3vw, 3.75rem);
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem);
  line-height: 1.16;
}

h3 {
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3rem);
  line-height: 1.3;
}

h4 {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--forest);
}

p { text-wrap: pretty; }

/* Brødtekst i main er dæmpet; alt med en klasse (.lead, .eyebrow, citat …)
   vinder på specificitet. Footeren arver sin egen farve. */
main p { color: var(--ink-soft); }

.eyebrow {
  margin-bottom: .9rem;
  color: var(--green-dark);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 1px;
  margin-right: .7rem;
  vertical-align: .35em;
  background: currentColor;
  opacity: .5;
}

.lead {
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.55;
}



/* 4. LAYOUT OG SEKTIONER ================================================== */

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.section { padding-block: clamp(3.75rem, 7vw, 6.5rem); }

.section--tint {
  background: var(--mist);
  border-block: 1px solid var(--line);
}

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.section__head h2 { margin-bottom: 1rem; }

/* Bredere variant, når en manchet skal kunne stå på én linje på desktop */
.section__head--wide { max-width: 58rem; }


/* 5. KNAPPER ============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .8rem 1.5rem;
  border: 1px solid var(--forest);
  border-radius: var(--radius-sm);
  background: var(--forest);
  color: var(--paper);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); box-shadow: none; }

.btn__arrow {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  transition: transform .2s ease;
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Sekundær: kun kontur */
.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--forest);
}
.btn--ghost:hover {
  background: var(--sage);
  border-color: var(--green);
  color: var(--forest);
}

/* Lys variant til mørk baggrund */
.btn--light {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--forest);
}
.btn--light:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--forest-deep);
}

/* Kompakt variant i headeren */
.btn--small {
  min-height: 2.65rem;
  padding: .55rem 1.15rem;
  font-size: .9375rem;
}


/* 6. HEADER OG NAVIGATION ================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(252, 252, 248, .92);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background-color .25s ease;
}
@supports (backdrop-filter: blur(10px)) {
  .site-header { background: rgba(252, 252, 248, .8); backdrop-filter: blur(12px); }
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

/* Tekstlogo — eneste logoelement. Sat med versaler; Georgia i fed har brug for
   åbnet knibning i store bogstaver, ellers klumper det sammen. */
.brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.02rem, .92rem + .42vw, 1.22rem);
  text-transform: uppercase;
  letter-spacing: .085em;
  color: var(--forest);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--green-dark); }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.8vw, 2rem);
}

.site-nav__list a:not(.btn) {
  display: inline-block;
  padding: .5rem .25rem;
  color: var(--forest);
  font-size: .9688rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
}
.site-nav__list a:not(.btn)::after {
  content: "";
  position: absolute;
  left: .25rem;
  right: .25rem;
  bottom: .18rem;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.site-nav__list a:not(.btn):hover::after,
.site-nav__list a:not(.btn):focus-visible::after,
.site-nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.site-nav__list a[aria-current="true"] { font-weight: 600; }

/* Menuknap — vises kun på mobil, og kun når JS er aktivt */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--forest);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.nav-toggle:hover { background: var(--sage); border-color: var(--green); }

.nav-toggle__bars {
  position: relative;
  width: 1.15rem;
  height: .75rem;
}
.nav-toggle__bars span,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars span    { top: calc(50% - 1px); }
.nav-toggle__bars::after  { bottom: 0; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(.3125rem) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-.3125rem) rotate(-45deg);
}

@media (max-width: 899px) {

  .header-inner { position: relative; }

  /* Med JS: foldbar menupanel */
  .js .nav-toggle { display: inline-flex; }

  .js .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1);
    display: none;
    padding: .5rem var(--gutter) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .js .site-nav[data-open] { display: block; }

  .js .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .js .site-nav__list li + li:not(.site-nav__cta) { border-top: 1px solid var(--line); }

  .js .site-nav__list a:not(.btn) {
    display: block;
    padding: .95rem .25rem;   /* rigelige touch-mål */
    font-size: 1.0625rem;
  }
  .js .site-nav__list a:not(.btn)::after { bottom: .65rem; }

  .js .site-nav__cta { margin-top: 1rem; }
  .js .site-nav__cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 3rem;
    font-size: 1rem;
  }

  /* Uden JS: kompakt vandret menu. Kontaktknappen vises som et almindeligt
     link, så alle fire punkter kan stå på én linje, og headeren følger ikke
     med ned ad siden — ellers ville den fylde for meget af skærmen. */
  .no-js .site-header { position: static; }

  .no-js .site-nav__list { gap: .25rem 1.1rem; flex-wrap: wrap; justify-content: flex-end; }
  .no-js .site-nav__list a { font-size: .875rem; }
  .no-js .site-nav__cta .btn {
    min-height: 0;
    padding: .5rem .25rem;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--forest);
    font-weight: 500;
  }
  .no-js .site-nav__cta .btn:hover {
    background: none;
    color: var(--green-dark);
    transform: none;
    text-decoration: underline;
  }
}

@media (max-width: 479px) {
  .no-js .header-inner { flex-wrap: wrap; row-gap: .15rem; padding-bottom: .6rem; }
  .no-js .site-nav { width: 100%; }
  .no-js .site-nav__list { justify-content: flex-start; }
}

/* Under 380 px er der ikke plads til både versal-logoet og ordet "Menu".
   Teksten skjules visuelt, men bliver stående for skærmlæsere, så knappen
   beholder sit tilgængelige navn. */
@media (max-width: 380px) {
  .brand { font-size: .95rem; letter-spacing: .06em; }
  .nav-toggle { padding: .5rem .7rem; }
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}


/* 7. HERO ================================================================= */

.hero {
  position: relative;
  padding-block: clamp(3rem, 6.5vw, 5.75rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(58rem 34rem at 78% 18%, rgba(220, 233, 225, .85), transparent 68%),
    radial-gradient(42rem 30rem at 4% 88%, rgba(220, 233, 225, .5), transparent 65%),
    var(--paper);
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

.hero__text { max-width: 34rem; }
.hero__text h1 { margin-bottom: 1.25rem; }
.hero__text .lead { max-width: 30rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}
/* På smalle skærme fylder knapperne hele bredden frem for at brække uens */
@media (max-width: 479px) {
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
}

.hero__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}

/* Under teksten på små skærme, centreret og med et loft på bredden */
@media (max-width: 899px) {
  .hero__art { max-width: 34rem; margin-inline: auto; width: 100%; }
}


/* 8. OM OS ================================================================ */

.intro {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 860px) {
  .intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.intro__text h2 { margin-bottom: 1.1rem; }
.intro__text .lead { margin-bottom: 1.1rem; }

/* Fremhævet citat */
.pull {
  position: relative;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pull__mark {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1.1rem;
  color: var(--green);
  opacity: .8;
}
.pull blockquote p {
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem);
  line-height: 1.3;
  margin-bottom: 1rem;
}
.pull figcaption {
  color: var(--ink-soft);
  font-size: .9688rem;
  line-height: 1.6;
}

/* Foreningens formål, med portrættet ved siden af */
.purpose {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
  .purpose { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
  .purpose__text { max-width: 52rem; }
}

.purpose__figure { margin: 0; }
.purpose__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
/* På smalle skærme står portrættet over teksten, men uden at fylde hele bredden */
@media (max-width: 899px) {
  .purpose__figure { max-width: 20rem; margin-inline: auto; width: 100%; }
}

.purpose__text {
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 3px solid var(--sage);
}
.purpose__label {
  margin-bottom: .6rem;
  color: var(--green-dark);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.purpose__lead {
  margin-bottom: .85rem;
  color: var(--forest);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.5;
}

/* Forklaring: hvad er grid-skala batterier */
.explainer {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 900px) {
  .explainer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.explainer__title { margin-bottom: 1rem; }
.explainer__text p + p { margin-top: .9rem; }
.explainer__text strong { color: var(--forest); font-weight: 600; }


/* Billedfigur */
.figure { margin: 0; }
.figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.figure figcaption,
.hero__art figcaption {
  margin-top: .85rem;
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.55;
}


/* 9. MÆRKESAGER =========================================================== */

.cards {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  /* 18,5rem er valgt, så seks kort lander på 3 spalter på desktop,
     2 på tablet og 1 på mobil — ikke 4 + 2, som 15rem ville give. */
  grid-template-columns: repeat(auto-fit, minmax(18.5rem, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--mist);
  border: 1px solid var(--sage);
  color: var(--green-dark);
}
.card__icon svg { width: 1.5rem; height: 1.5rem; }

.card h3 { margin-bottom: .6rem; }
.card p { font-size: .9688rem; }


/* 10. MEDLEMSKAB ========================================================== */

.section--dark {
  position: relative;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--sage);
  overflow: hidden;
}
.section--dark h2,
.section--dark h3 { color: var(--paper); }
.section--dark .eyebrow { color: var(--sage); opacity: .95; }
.section--dark p { color: rgba(220, 233, 225, .82); }
.section--dark .lead { color: var(--sage); }
.section--dark a:not(.btn) { color: var(--sage); }

.member {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  /* Lige store spalter, så billedet fylder mere; teksten holdes
     alligevel på en læsbar bredde af .member__text max-width. */
  .member { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.member__text { max-width: 40rem; }
.member__text h2 { margin-bottom: 1.1rem; }
.member__text .lead { margin-bottom: 1.1rem; }
.member__actions { margin-top: 2rem; }

.member__figure { margin: 0; }
.member__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(220, 233, 225, .22);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .6);
}


/* 10b. MEDLEMSLOGOER — vandret løkke ====================================== */

.members {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(220, 233, 225, .18);
}

.members .members__title {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sage);
  opacity: .85;
}

/* Løkken består af to identiske spor. Når det første er kørt præcis sin egen
   bredde plus mellemrummet til venstre, står det andet nøjagtigt hvor det
   første startede — derfor virker den uendelig uden spring. */
.marquee {
  --logo-gap: clamp(2.75rem, 6vw, 5.5rem);
  --logo-scale: 1;
  display: flex;
  gap: var(--logo-gap);
  overflow: hidden;
  /* Toner ud i kanterne i stedet for at klippe hårdt */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-around;
  gap: var(--logo-gap);
  min-width: 100%;
  margin: 0;
  padding: 0;
  animation: rulle 40s linear infinite;
}

@keyframes rulle {
  to { transform: translateX(calc(-100% - var(--logo-gap))); }
}

/* Sæt på pause, så navnene kan læses — også ved tastaturfokus */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
  flex: none;
  color: var(--sage);
  font-size: clamp(1rem, .92rem + .35vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .005em;
  white-space: nowrap;
  opacity: .85;
}

/* Logoerne gengives hvide, uanset hvilken farve filen har. Fjern filter-linjen,
   hvis de skal stå i fuld farve — så skal båndet dog flyttes til en lys flade,
   for Caverion og Kromann Reumert er hvide logoer uden mørk baggrund. */
.marquee__item img {
  display: block;
  height: calc(var(--h, 2rem) * var(--logo-scale));
  width: auto;
  filter: brightness(0) invert(1);
}

/* Højden sættes pr. logo, ikke ens for alle. Et bredt étlinjet logo som
   Hitachi Energy fylder optisk langt mere end et trelinjet som Grace ved
   samme højde, så de ville se ud til at have vidt forskellig vægt. */
.logo--hybess     { --h: 1.35rem; }
.logo--hitachi    { --h: 1.45rem; }
.logo--bos        { --h: 1.5rem; }
.logo--scanpotec  { --h: 1.55rem; }
.logo--kromann    { --h: 1.55rem; }
.logo--copenhagen { --h: 1.65rem; }
.logo--eluminate  { --h: 1.85rem; }
.logo--caverion   { --h: 2.2rem; }
.logo--battman    { --h: 2.3rem; }
.logo--edf        { --h: 2.4rem; }
.logo--grace      { --h: 2.5rem; }
/* WeStorix er et kvadratisk emblem, ikke et bredt ordmærke, og skal derfor
   være højere for at fylde nogenlunde det samme optisk. */
.logo--westorix   { --h: 3.4rem; }

@media (max-width: 600px) {
  .marquee { --logo-scale: .85; }
}


/* 11. KONTAKT ============================================================= */

.contact {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: start;
}
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
}

.contact__panel {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.contact__subtitle {
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--green-dark);
}

.details__row + .details__row {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.details dt {
  margin-bottom: .3rem;
  color: var(--ink-soft);
  font-size: .875rem;
  font-weight: 600;
}
.details dd {
  font-size: 1.0625rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.details dd a {
  display: inline-block;
  padding-block: .25rem;      /* rummeligt touch-mål */
  color: var(--forest);
  text-decoration-color: var(--line-strong);
}
.details dd a:hover { color: var(--green-dark); text-decoration-color: currentColor; }

.contact__note {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  line-height: 1.6;
}
.contact__note strong { color: var(--forest); }

.people {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
/* To spalter på tablet — først når kortene er brede nok til en hel e-mailadresse */
@media (min-width: 680px) and (max-width: 899px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.person {
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: border-color .22s ease, box-shadow .22s ease;
}
.person:hover { border-color: var(--green); box-shadow: var(--shadow-md); }

.person__photo {
  flex: none;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sage);      /* rolig flade mens billedet hentes */
  box-shadow: 0 0 0 1px var(--line-strong);
}

.person__body { min-width: 0; }
.person__name { margin-bottom: .15rem; }
.person__role {
  margin-bottom: .75rem;
  color: var(--green-dark);
  font-size: .9375rem;
  font-weight: 600;
}
.person__links {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .9688rem;
}
.person__links a {
  color: var(--forest);
  text-decoration-color: var(--line-strong);
  overflow-wrap: anywhere;
  padding-block: .15rem;
}
.person__links a:hover { color: var(--green-dark); text-decoration-color: currentColor; }

/* Under 900 px står monogrammet over navnet, så adresserne får hele bredden */
@media (max-width: 899px) {
  .person { flex-direction: column; gap: 1.15rem; }
}

/* På de smalleste skærme skal e-mailadresserne kunne stå på én linje */
@media (max-width: 400px) {
  .contact__panel, .person, .card, .pull { padding: 1.35rem; }
  .person__links { font-size: .875rem; }
  .details dd { font-size: 1rem; }
}


/* 11b. UNDERSIDE: JURIDISK TEKST ========================================== */

.legal-page { padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem); }

.page-head {
  max-width: 44rem;   /* samme mål som .legal, så kanterne flugter */
  padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-strong);
}
.page-head h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  margin-bottom: .9rem;
}
.page-head__meta {
  color: var(--ink-soft);
  font-size: .875rem;
}
.page-head__note {
  margin-top: .9rem;
  padding: .7rem 1rem;
  border-left: 3px solid var(--sage);
  background: var(--mist);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .9375rem;
}

/* Målet er læsbar linjelængde — ca. 70 tegn */
.legal {
  max-width: 44rem;
  color: var(--ink-soft);
}
.legal__lead {
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.175rem);
  line-height: 1.6;
}
.legal p + p { margin-top: 1rem; }

.legal h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  margin-bottom: .8rem;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem);
}

.legal ul {
  margin: 1rem 0 0;
  padding-left: 1.35rem;
  list-style: disc;
}
.legal li { margin-bottom: .5rem; }
.legal li::marker { color: var(--green); }
.legal p + ul { margin-top: .8rem; }
.legal ul + p { margin-top: 1.25rem; }
/* Bevidst ingen særregel for h2 efter liste — alle afsnitsoverskrifter skal
   have samme luft over sig, uanset hvad der står før dem. */

.legal a { color: var(--green-dark); text-underline-offset: .2em; }
.legal a:hover { color: var(--forest); }

.back-link-wrap {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-block: .4rem;
  color: var(--forest);
  font-weight: 600;
  text-decoration: none;
}
.back-link svg { width: 1.1em; height: 1.1em; transition: transform .2s ease; }
.back-link:hover { text-decoration: underline; }
.back-link:hover svg { transform: translateX(-3px); }


/* 12. FOOTER ============================================================== */

.site-footer {
  padding-block: clamp(2.75rem, 5vw, 4rem) clamp(2rem, 4vw, 2.75rem);
  background: var(--forest);
  color: rgba(220, 233, 225, .85);
  font-size: .9375rem;
}

.site-footer__inner {
  display: grid;
  gap: 2rem;
}
@media (min-width: 860px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
    gap: 2.5rem;
    align-items: start;
  }
}

.brand--footer {
  font-size: clamp(1.05rem, .95rem + .45vw, 1.25rem);
  color: var(--paper);
  margin-bottom: .55rem;
}
.site-footer__tagline { max-width: 22rem; opacity: .8; }

.site-footer__contact p + p { margin-top: .5rem; }
.site-footer__contact a { display: inline-block; padding-block: .25rem; }
.site-footer a {
  color: var(--sage);
  text-decoration-color: rgba(220, 233, 225, .4);
  overflow-wrap: anywhere;
}
.site-footer a:hover { color: var(--paper); text-decoration-color: currentColor; }

/* Markering af den side, man står på — vist med vægt, ikke kun farve */
.site-footer a[aria-current="page"] {
  color: var(--paper);
  font-weight: 600;
  text-decoration-color: currentColor;
}


.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(220, 233, 225, .18);
}
@media (min-width: 860px) {
  .site-footer__meta {
    flex-direction: column;
    align-items: flex-end;
    padding-top: 0;
    border-top: 0;
    text-align: right;
  }
}
.copyright { opacity: .75; }

.to-top {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding-block: .35rem;
  font-weight: 600;
  text-decoration: none;
}
.to-top svg { width: 1.05em; height: 1.05em; transition: transform .2s ease; }
.to-top:hover { text-decoration: underline; }
.to-top:hover svg { transform: translateY(-2px); }


/* 13. BEVÆGELSE, REDUCED MOTION OG PRINT ================================== */

/* Fade-in: kun aktiv når JS kører, så indholdet altid er synligt uden JS */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal { opacity: 1; transform: none; }
  .btn:hover, .card:hover { transform: none; }

  /* Medlemslogoer står stille og ombrydes i stedet for at rulle */
  .marquee {
    flex-wrap: wrap;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .marquee__track {
    animation-name: none;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.75rem;
    /* Uden dette bliver sporet bredere end beholderen og ombryder aldrig,
       fordi flex:none lader det vokse frit efter indholdet. */
    width: 100%;
    padding-inline: var(--gutter);
    box-sizing: border-box;
  }
  .marquee__track[aria-hidden="true"] { display: none; }
}

@media print {
  .site-header, .hero__art, .member__figure, .skip-link, .to-top,
  .hero__actions, .member__actions { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .section, .hero { padding-block: 1.5rem; background: none; }
  .section--dark, .site-footer { background: none; color: #000; }
  .section--dark h2, .section--dark .lead,
  .section--dark p, .site-footer, .site-footer a { color: #000; }
  .card, .person, .contact__panel, .pull { break-inside: avoid; box-shadow: none; }
}