/* ————— Kegel Entreprise designsystem — DEN DELTE SIDESKAL —————
   Verden: sten. Grafit (sorte betonsten), kridhvid, afretningssand.
   Én accent: markeringsspray-orange — kun til handling og levende tal.
   Mål og priser sættes i mono som landmålerens feltnoter.

   Filen er KUNDENS egen (kundesider/<slug>/assets/) og serveres på
   /kundeside-assets/side.css. Her står ÉN gang det, mere end én side på
   hjemmesiden bruger: farverne, typografien, topbaren, fugemotivet, knappen,
   fokusringen og footeren. Før 13/9 (issue #176) var de kopieret ind i hver
   html-fil, og en ny side betød en ny kopi, der drev fra de andre.

   Regler, kun ÉN side bruger, bliver i sidens eget <style> — læg dem ikke her.
   Prisberegner-siden (/prisberegner) har med vilje sit EGET designsystem
   (granit/mos/sand) og er ikke en kopi af dette; den hører ikke ind her.

   HEAD-KONVENTIONEN, hver side på hjemmesiden fylder ud:
   <meta charset> · <meta viewport> · <title> · <meta description>
   <link rel=icon> · <meta theme-color> · delekortet (OG, issue #177)
   <link rel=stylesheet href="/kundeside-assets/side.css">  ← denne fil
   <style> sidens egne regler </style>
*/
:root {
  --grafit: #1e2227;
  --grafit-dyb: #14171b;
  --kridt: #fafaf7;
  --sand: #eae4d8;
  --sand-dyb: #ddd5c4;
  --stengraa: #6f6b62;
  --spray: #d94b00;
  --spray-lys: #ff6a1a;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--kridt); color: var(--grafit); font: 17px/1.65 var(--sans); }
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }

/* Fugemotiv: løberforbandt som diskret deler */
.fuge {
  height: 12px;
  background:
    repeating-linear-gradient(90deg, transparent 0 88px, var(--sand-dyb) 88px 90px),
    repeating-linear-gradient(90deg, transparent 0 44px, transparent 44px 88px),
    linear-gradient(var(--sand) 0 5px, transparent 5px 7px, var(--sand) 7px 12px);
  background-color: var(--sand);
}

/* ————— Topbar ————— */
header { background: var(--kridt); border-bottom: 1px solid var(--sand-dyb); }
/* `padding-block` og IKKE genvejen `padding: 18px 0` (issue #184): genvejen
   nulstiller også den vandrette padding, `.wrap` giver, og `.topbar` står
   sidst i filen og vinder på lige specificitet. Mærket lå derfor på x=0 på
   en telefon — det rørte skærmkanten på hver eneste side under 1060 px.
   Denne ene linje retter dem alle sammen. */
.topbar { display: flex; align-items: center; justify-content: space-between; padding-block: 18px; }
.maerke { font-weight: 800; letter-spacing: .16em; font-size: 15px; }
.maerke span { color: var(--stengraa); font-weight: 600; }
.top-cta { font-size: 14px; font-weight: 700; text-decoration: none; color: var(--spray); }

/* ————— Typografi og knap ————— */
h1 { font-size: clamp(34px, 5.6vw, 56px); line-height: 1.06; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
.knap {
  display: inline-block; background: var(--spray); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 16.5px; padding: 15px 28px; border: none; border-radius: 4px; cursor: pointer;
}
.knap:hover { background: var(--spray-lys); }
.knap:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--spray-lys); outline-offset: 2px;
}

section { padding: 76px 0; }
h2 { font-size: clamp(25px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; text-wrap: balance; }
.intro { color: var(--stengraa); max-width: 62ch; margin-bottom: 44px; }

/* ————— Footer (samme markup og samme bytes på alle sider) —————
   Footeren bærer kundens KANONISKE kontaktoplysninger (issue #183):
   firmanavn, CVR, fysisk adresse, klikbart telefonnummer og klikbar mail.
   Kilden er `assets/virksomhed.json` i samme mappe, og `tests/
   test_kundeside_kontakt.py` måler, at siderne stemmer med den. Rettes et
   nummer, rettes json'en FØRST. */
footer { background: var(--grafit-dyb); color: #8f9aa5; font-size: 13.5px; padding: 30px 0; line-height: 1.7; }
footer .wrap { display: flex; justify-content: space-between; gap: 14px 26px; flex-wrap: wrap; }
footer a { color: inherit; text-decoration: none; }
/* Telefon og mail SKAL se ud som noget, man kan trykke på — footerens egen
   dæmpede farve gør et `tel:`-link usynligt som link. */
footer .firma strong { color: #c9d1d9; }
footer .kontakt { text-align: right; }
footer .kontakt a { color: #c9d1d9; }
footer .kontakt a:hover { color: #fff; text-decoration: underline; }
/* Højrestillet tekst giver kun mening, så længe de to spalter STÅR ved
   siden af hinanden. Bryder de, læses alt fra venstre. */
@media (max-width: 640px) { footer .kontakt { text-align: left; } }

/* honeypot */
/* Honningkrukken: SKJULT, ikke flyttet ud af skærmen (#170). Et felt
   uden for skærmen ser browserens autofyld stadig — og fylder det. */
.hp { display: none !important; }

@media (max-width: 540px) {
  section { padding: 56px 0; }
}