/* driftfokus.dk — fælles stil for firmasitet (design V4, dFactoDesignBureau).
   Farver og font fra design guiden V1.1. */

@font-face {
  font-family: "Geologica";
  src: url("geologica.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --traegroen: #0F5F23;
  --haekgroen: #46AF78;
  --pblaa: #236192;
  --tagroed: #962828;
  --vejgraa: #62646C;

  --pblaa-lys: #5A89AE;      /* citatbånd, blå */
  --pblaa-bleg: #C6D6E3;     /* CTA-pille, faktaboks */
  --pblaa-svag: #E3EAF0;     /* header- og footerforløb */
  --haekgroen-lys: #74C497;  /* citatbånd på forsiden */
  --traegroen-lys: #4B8A5C;  /* citatbånd på ArealFokus */
  --groen-bleg: #D3EBDD;     /* "Sådan kommer I godt i gang" */

  --tekst: #4A4C52;
  --bredde: 1100px;
  --luft: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--tekst);
  font-family: "Geologica", system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pblaa); }
.ramme { max-width: var(--bredde); margin: 0 auto; padding: 0 var(--luft); }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(#fff 0%, #fff 45%, var(--pblaa-svag) 100%);
  border-bottom: 1px solid #d5dfe8;
}
.top .ramme { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.top .logo img { height: 40px; width: auto; }
.menu { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu > li + li::before { content: "I"; color: var(--pblaa); padding: 0 14px; font-size: 14px; }
.menu a, .menu button {
  font: inherit; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pblaa); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 6px 0;
}
.menu a:hover, .menu button:hover { color: var(--haekgroen); }
.menu a[aria-current="page"] { color: #9AB3C8; }
.login-valg {
  display: none; position: absolute; right: -12px; top: 100%;
  background: #fff; box-shadow: 0 6px 18px rgba(35, 97, 146, .18);
  list-style: none; margin: 0; padding: 6px 12px; min-width: 140px;
}
.login-valg a { display: block; text-transform: none; letter-spacing: 0; font-size: 16px; padding: 4px 0; }
.login:hover .login-valg, .login:focus-within .login-valg, .login.aaben .login-valg { display: block; }
.burger { display: none; }

/* ---------- hero ---------- */
.hero {
  max-width: var(--bredde); margin: 0 auto;
  background-size: cover; background-position: center right;
  color: #fff; min-height: 560px;
  display: flex; align-items: center;
}
.hero .indhold { padding: 40px var(--luft); max-width: 600px; }
.kicker { font-size: 18px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; margin: 0 0 6px; }
.hero h1 {
  font-size: clamp(40px, 6vw, 66px); line-height: 1; font-weight: 900; margin: 0 0 22px; letter-spacing: -.01em;
}
.hero h2 { font-size: clamp(20px, 2.2vw, 25px); line-height: 1.2; font-weight: 700; margin: 0 0 14px; }
.hero p { font-size: 16px; margin: 0 0 14px; }
.hero--forside  { background-image: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,0) 60%), url("billeder/hero_forside.jpg"); }
.hero--teamfokus { background-image: url("billeder/hero_teamfokus.jpg"); }
.hero--arealfokus { background-image: url("billeder/hero_arealfokus.jpg"); }

/* ---------- citatbånd ---------- */
.citat {
  max-width: var(--bredde); margin: 64px auto; padding: 44px var(--luft);
  color: #fff; text-align: center; font-weight: 600; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.4;
}
.citat p { max-width: 820px; margin: 0 auto; }
.citat--blaa { background: var(--pblaa-lys); }
.citat--groen { background: var(--haekgroen-lys); }
.citat--moerkgroen { background: var(--traegroen-lys); }

/* ---------- billede + tekst ---------- */
.del {
  max-width: var(--bredde); margin: 0 auto; padding: 0 var(--luft);
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}
.del + .del { margin-top: 64px; }
.del--spejl .billede { order: 2; }
.del .billede img { width: 100%; }
.del .produktlogo { height: 46px; width: auto; margin-bottom: 4px; }
.etiket { color: var(--pblaa); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px; }
.del h2 { font-size: clamp(36px, 4.4vw, 52px); line-height: 1; font-weight: 900; margin: 0 0 14px; letter-spacing: -.01em; }
.del h3 { font-size: clamp(20px, 2vw, 25px); line-height: 1.15; font-weight: 700; color: var(--vejgraa); margin: 0 0 16px; }
.del p { margin: 0 0 16px; }
.del ul { margin: 0 0 16px; padding-left: 20px; }
.blaa h2 { color: var(--pblaa); }
.groen h2 { color: var(--traegroen); }
.se-mere { font-weight: 700; text-decoration: none; white-space: nowrap; }
.groen .se-mere { color: var(--traegroen); }

/* ---------- faktaboks ---------- */
.boks { max-width: var(--bredde); margin: 64px auto 0; padding: 36px var(--luft) 40px; }
.boks h2 { text-align: center; font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; margin: 0 0 18px; }
.boks .spalter { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.boks p { margin: 0; }
.boks--blaa { background: var(--pblaa-bleg); }
.boks--blaa h2 { color: var(--pblaa); }
.boks--groen { background: var(--groen-bleg); }
.boks--groen h2 { color: var(--traegroen); }

/* ---------- CTA-pille ---------- */
.cta {
  display: block; max-width: calc(var(--bredde) - 2 * var(--luft)); margin: 56px auto 80px;
  border-radius: 999px; padding: 26px 40px; text-align: center; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.cta strong { display: block; font-size: clamp(24px, 3vw, 36px); font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.cta span { display: block; font-size: clamp(16px, 1.7vw, 21px); font-weight: 600; line-height: 1.3; max-width: 620px; margin: 6px auto 0; }
.cta--lys { background: var(--pblaa-bleg); color: var(--pblaa); }
.cta--roed { background: var(--tagroed); color: #fff; }
.cta--groen { background: var(--traegroen); color: #fff; }

/* ---------- kontakt ---------- */
.kontakt-top { padding-top: 56px; }
.kontakt-top h1 { color: var(--pblaa); font-size: clamp(40px, 5vw, 56px); line-height: 1; font-weight: 900; margin: 0 0 14px; }
.skriv {
  background: linear-gradient(rgba(35,97,146,.55), rgba(35,97,146,.55)), url("billeder/kontakt_baggrund.jpg") center/cover;
  color: #fff; padding: 44px 40px; text-align: center;
}
.skriv h2 { color: #fff; font-size: clamp(30px, 3.4vw, 40px); margin: 0 0 14px; text-transform: uppercase; }
.skriv form { display: grid; gap: 10px; max-width: 330px; margin: 0 auto; }
.skriv input, .skriv textarea {
  font: inherit; font-size: 15px; width: 100%; border: 1px solid #c9d7e3; border-radius: 999px;
  padding: 8px 16px; color: var(--tekst); background: #fff;
}
.skriv textarea { border-radius: 16px; resize: vertical; min-height: 80px; }
.skriv input::placeholder, .skriv textarea::placeholder { color: #9AB3C8; }
.skriv button {
  font: inherit; font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--haekgroen); color: #fff; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer;
}
.skriv button:hover { background: var(--traegroen); }
.skriv .ring { font-size: clamp(30px, 3.4vw, 40px); font-weight: 900; line-height: 1.05; margin: 24px 0 0; text-transform: uppercase; }
.skriv .ring a { color: #fff; text-decoration: none; }
.skriv .svar { min-height: 1.4em; margin: 4px 0 0; font-weight: 600; }
.skjult { position: absolute; left: -9999px; }

.personer { max-width: var(--bredde); margin: 0 auto; padding: 0 var(--luft); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.person { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center; font-size: 15px; }
.person img { width: 160px; }
.person strong { display: block; font-size: 17px; color: var(--vejgraa); }
.person a { color: inherit; text-decoration: none; }
.person a:hover { color: var(--pblaa); }

/* ---------- tekstside (privatlivspolitik) ---------- */
.tekstside { max-width: 760px; margin: 0 auto; padding: 56px var(--luft) 24px; }
.tekstside h1 { color: var(--pblaa); font-size: clamp(34px, 4vw, 46px); line-height: 1.05; font-weight: 900; margin: 0 0 18px; }

/* ---------- footer ---------- */
.bund { margin-top: 64px; background: linear-gradient(var(--pblaa-svag), #fff 70%); border-top: 1px solid #d5dfe8; }
.bund .ramme { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-top: 28px; padding-bottom: 28px; font-size: 13px; color: var(--pblaa); line-height: 1.45; }
.bund .logo img { height: 36px; width: auto; margin-bottom: 8px; }
.bund p { margin: 0 0 6px; }
.bund ul { list-style: none; margin: 0; padding: 0; }
.bund li { margin-bottom: 10px; }
.bund a { color: var(--pblaa); }
.copy { background: var(--pblaa); color: #C6D6E3; text-align: center; font-size: 12px; padding: 14px var(--luft); }
.copy a { color: inherit; }

/* ---------- smal skærm ---------- */
@media (max-width: 820px) {
  .burger {
    display: block; font: inherit; font-size: 15px; letter-spacing: .08em; text-transform: uppercase;
    background: none; border: 1px solid #b9cbda; border-radius: 6px; color: var(--pblaa); padding: 6px 12px; cursor: pointer;
  }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 72px;
    flex-direction: column; align-items: stretch; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,.1); padding: 8px var(--luft) 16px;
  }
  .top.aaben .menu { display: flex; }
  .menu > li + li::before { content: none; }
  .menu > li > a, .menu > li > button { display: block; padding: 12px 0; border-bottom: 1px solid #edf1f5; width: 100%; text-align: left; }
  .login-valg { display: block; position: static; box-shadow: none; padding: 4px 0 0 16px; }
  .hero { min-height: 0; }
  .hero .indhold { padding-top: 56px; padding-bottom: 56px; background: rgba(0,0,0,.55); max-width: none; }
  .del, .boks .spalter, .personer { grid-template-columns: 1fr; }
  .del--spejl .billede { order: 0; }
  .citat { margin: 40px auto; padding: 30px var(--luft); }
  .del + .del { margin-top: 48px; }
  .cta { margin-left: var(--luft); margin-right: var(--luft); border-radius: 28px; padding: 22px 20px; }
  .bund .ramme { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 420px) {
  .person { grid-template-columns: 110px 1fr; }
  .person img { width: 110px; }
}

/* LinkedIn i footeren */
.bund .linkedin svg { vertical-align: baseline; margin-left: 7px; }