/* =================================================================
   CEMA.dk — Centrum Maskinudlejning
   Designretning matcher Centrum Gruppens fælles identitet (cgr.dk):
   sort tekst, lyse baggrunde, orange links og accenter (#C8412B),
   med mørke eller orange bannere dér, hvor teksten skal poppe ud.
   Signaturelementet "maskinskiltet" er bevaret, men i sort/orange
   i stedet for sort/gul. Mobilførst.
   ================================================================= */

:root {
  --jord:        #16191a;
  --jord-mild:   #22272a;
  --kubota:      #c8412b;   /* primær brandfarve — samme orange som cgr.dk */
  --kubota-mork: #a3331f;   /* hover/aktiv */
  --kubota-lys:  #e8623f;   /* orange der skal poppe på mørk baggrund */
  --beton:       #e7e8e3;
  --beton-lys:   #f4f5f2;
  --staal:       #6a7076;
  --staal-lys:   #9aa0a5;
  --hvid:        #ffffff;
  --linje:       #d3d5cf;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --brod:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --maks: 1180px;
  --gab: 1.25rem;
  --radius: 3px;          /* maskiner har skarpe kanter, ikke bløde */
  --skygge: 0 1px 2px rgba(22,25,26,.08), 0 8px 24px rgba(22,25,26,.06);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }

/* ---------- VIGTIGT: hvorfor overflow-x skal vaere clip og ikke hidden ----------
   overflow-x: hidden goer automatisk overflow-y til auto. Dermed bliver
   html og body til deres egen rulleboks, og position: sticky binder sig
   til DEN boks i stedet for til skaermen. Resultatet er, at den hvide
   header ruller vaek, saa snart man scroller — praecis den fejl, der blev
   meldt ind.

   overflow-x: clip goer det samme (klipper alt, der stikker ud i siden),
   men uden at lave en rulleboks. Saa virker sticky igen.

   @supports sikrer, at aeldre browsere uden clip beholder hidden. Dér
   virker sticky ganske vist ikke, men til gengaeld kan siden stadig ikke
   skubbes bredere end skaermen — og det er den mindst daarlige af de to. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--brod);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--jord);
  background: var(--hvid);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* sikkerhedsnet: intet kan skubbe siden bredere end skærmen */
  overflow-wrap: break-word;      /* lange danske sammensætningsord brækker i stedet for at skubbe layoutet */
}

@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

img, picture, video { max-width: 100%; display: block; }
picture img { width: 100%; height: 100%; object-fit: cover; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 7.5vw, 3.9rem); }
h2 { font-size: clamp(1.65rem, 5.2vw, 2.6rem); }
h2 em, h3 em { font-style: italic; color: var(--kubota); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 3.4vw, 1.4rem); }
p  { margin: 0 0 1em; text-wrap: pretty; }
a  { color: var(--kubota); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--kubota-mork); }

:focus-visible {
  outline: 3px solid var(--kubota);
  outline-offset: 2px;
}

.indhold { width: 100%; max-width: var(--maks); margin-inline: auto; padding-inline: 1.1rem; }
.skjul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.spring {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: var(--jord); color: var(--hvid); padding: .7rem 1.1rem;
  font-weight: 700; transition: top .15s;
}
.spring:focus { top: 1rem; }

/* ---------- Øjenbryn: lille etiket som på et typeskilt ---------- */
.oejenbryn {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kubota);
  margin: 0 0 .7rem;
  display: flex; align-items: center; gap: .6rem;
}
.oejenbryn::after { content: ''; flex: 1; height: 1px; background: var(--linje); }

/* Vis/skjul efter skærmbredde. Begge varianter står i HTML'en, så
   bynavnene stadig kan læses af Google — kun den ene vises ad gangen. */
.kun-bred { display: none; }
@media (min-width: 720px) {
  .kun-smal { display: none; }
  .kun-bred { display: inline; }
}

/* =================================================================
   SIGNATUR: maskinskiltet
   Bygget som en pånittet decal i sort/orange — Centrum Gruppens
   farver. Fareskrå i toppen, sort plade, monotype, nitter i hjørnerne.
   ================================================================= */
.skilt {
  position: relative;
  background: var(--jord);
  color: var(--hvid);
  padding: 1.15rem 1.1rem .95rem;
  border-radius: var(--radius);
  overflow: hidden;
}
.skilt::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 6px;
  background: repeating-linear-gradient(
    135deg, var(--kubota) 0 9px, var(--jord) 9px 18px);
}
/* nitter */
.skilt::after {
  content: '';
  position: absolute; inset: 14px 8px auto auto;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--staal);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
}
.skilt__label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--kubota-lys);
  margin-top: .25rem;
}
.skilt__pris {
  display: block;
  font-family: var(--display);
  font-size: 2.05rem; font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin: .15rem 0 .1rem;
}
.skilt__note {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--staal-lys);
  letter-spacing: .02em;
}
.skilt--lille { padding: .85rem .9rem .75rem; }
.skilt--lille .skilt__pris { font-size: 1.5rem; }

/* ---------- Knapper ---------- */
.knap {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.01em;
  padding: .95rem 1.5rem;
  min-height: 52px;                /* tommelfingervenligt */
  border: 2px solid var(--jord);
  border-radius: var(--radius);
  background: var(--jord); color: var(--hvid);
  text-decoration: none; cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.knap:hover { background: var(--jord-mild); color: var(--hvid); transform: translateY(-1px); }
.knap:active { transform: translateY(0); }
.knap--primaer { background: var(--kubota); border-color: var(--kubota); }
.knap--primaer:hover { background: var(--kubota-mork); border-color: var(--kubota-mork); }
.knap--gul { background: var(--kubota); border-color: var(--kubota); color: var(--hvid); }
.knap--gul:hover { background: var(--kubota-mork); border-color: var(--kubota-mork); color: var(--hvid); }
.knap--klar { background: transparent; color: var(--jord); }
.knap--klar:hover { background: var(--jord); color: var(--hvid); }
.knap--fuld { width: 100%; }

/* =================================================================
   Topbjælke + navigation
   ================================================================= */
.top {
  background: var(--jord); color: var(--beton);
  font-family: var(--brod); font-size: .82rem; letter-spacing: .01em;
}
.top .indhold {
  display: flex; flex-wrap: wrap; gap: .35rem 1.3rem;
  justify-content: center; padding-block: .5rem;
}
/* Fra tablet og op: spred de tre punkter ud over hele bjælkens bredde,
   så de flugter med logo og menu i headeren nedenunder. På mobil
   bevares centrering, ellers ville punkterne klaske ud i hjørnerne,
   når de brydes over flere linjer. */
@media (min-width: 720px) {
  .top .indhold { justify-content: space-between; }
}
.top a { color: var(--kubota-lys); text-decoration: none; font-weight: 600; }
.top a:hover { text-decoration: underline; }
.top span { white-space: nowrap; }

.hoved {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--linje);
}
/* ---------- Headeren skrumper, når man scroller ----------
   Den har altid været fastfrosset øverst (position: sticky). Nyt er, at
   den trækker sig sammen, så snart man har scrollet 60 px ned: mindre
   luft over og under, mindre logo, og undertitlen under logoet foldes
   væk. Det giver omkring 30 px mere indhold på skærmen — mest værd på
   en telefon, hvor headeren ellers spiser en tiendedel af højden hele
   vejen ned gennem siden.

   Klassen sættes af main.js. Sker der noget med JavaScript, bliver
   headeren bare i fuld størrelse — den er stadig fastfrosset. */
.hoved {
  transition: box-shadow .25s ease;
}
.hoved--lille {
  box-shadow: 0 2px 14px rgba(0,0,0,.09);
}
.hoved .indhold {
  transition: padding-block .22s cubic-bezier(.2,.7,.3,1);
}
.hoved--lille .indhold { padding-block: .35rem; }
.hoved .logo { transition: font-size .22s cubic-bezier(.2,.7,.3,1); }
.hoved--lille .logo { font-size: 1.32rem; }
.hoved .logo small {
  overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease, margin-top .22s ease;
  max-height: 1.4em; opacity: 1;
}
.hoved--lille .logo small { max-height: 0; opacity: 0; margin-top: 0; }

@media (min-width: 900px) {
  .hoved--lille .indhold { padding-block: .45rem; }
  .hoved--lille .logo { font-size: 1.6rem; }
}

.hoved .indhold {
  display: flex; align-items: center; justify-content: space-between;
  /* flex-wrap er afgørende: uden den maser den åbne mobilmenu sig ind
     som en tredje kolonne ved siden af logoet og Menu-knappen, og
     menupunkterne bliver klemt sammen i en smal søjle ude til højre. */
  flex-wrap: wrap;
  gap: 1rem; padding-block: .7rem;
}
.logo {
  font-family: var(--display); font-weight: 800; font-size: 1.65rem;
  letter-spacing: -.035em; color: var(--jord); text-decoration: none;
  line-height: 1; display: flex; flex-direction: column;
}
@media (min-width: 900px) {
  .logo { font-size: 2.1rem; }
  .logo small { font-size: .66rem; margin-top: .3rem; }
}
.logo b { color: var(--kubota); font-weight: 800; display: inline-block; }

/* ---------- Liv i logoet ----------
   Tre ting, alle diskrete. Et logo skal lægge sig i hukommelsen, ikke
   stjæle opmærksomhed fra overskriften ved siden af.

   1) Ved sideåbning glider hele logoet et par pixels op på plads,
      og undertitlen trækker sine bogstaver ud fra sammenklemt til
      normal afstand. Det tager under et sekund og sker kun én gang.
   2) De orange MA får et lille hop nedefra, en anelse forsinket, så
      øjet når at se det. Det er dét, der gør, at man husker, hvor
      farven sidder.
   3) Ved musen over trækkes en orange streg ud under logoet, og MA
      løfter sig et enkelt pixel. Ingenting blinker eller kører i ring.

   Bemærk: hele blokken slås automatisk fra for besøgende, der har
   "reducér bevægelse" slået til i styresystemet — den globale regel
   øverst i filen sætter alle animationer til 0,01 ms. */
.logo {
  position: relative;
  animation: logoIndtoning .55s cubic-bezier(.2, .7, .3, 1) both;
}
.logo b {
  animation: logoMaerke .5s cubic-bezier(.2, .8, .25, 1) .22s both;
  transition: transform .25s ease;
}
.logo small {
  animation: logoUnderrubrik .7s cubic-bezier(.2, .7, .3, 1) .12s both;
}
.logo::after {
  content: ''; position: absolute; left: 0; bottom: -4px;
  height: 2px; width: 0; background: var(--kubota);
  border-radius: 2px; transition: width .32s cubic-bezier(.2, .7, .3, 1);
}
.logo:hover::after,
.logo:focus-visible::after { width: 100%; }
.logo:hover b { transform: translateY(-1px); }

@keyframes logoIndtoning {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes logoMaerke {
  0%   { opacity: 0; transform: translateY(7px); }
  60%  { opacity: 1; transform: translateY(-2px); }
  100% { opacity: 1; transform: none; }
}
@keyframes logoUnderrubrik {
  from { opacity: 0; letter-spacing: .02em; }
  to   { opacity: 1; letter-spacing: .13em; }
}
.logo small {
  font-family: var(--mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--staal);
  margin-top: .2rem;
}

.nav-knap {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--linje); border-radius: var(--radius);
  font-family: var(--display); font-weight: 700; font-size: .9rem;
  padding: .6rem .85rem; min-height: 44px; cursor: pointer; color: var(--jord);
}
.nav-knap svg { width: 18px; height: 18px; }

.nav {
  display: none;
  border-top: 1px solid var(--linje);
  background: var(--hvid);
}
/* Den åbne menu lægger sig på sin egen linje i fuld bredde
   under logoet, i stedet for at dele plads med det. */
.nav.aaben { display: block; flex: 0 0 100%; order: 3; }
.nav ul { list-style: none; margin: 0; padding: .3rem 0 .6rem; }
.nav li + li { border-top: 1px solid var(--beton); }
.nav a {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; padding: .9rem .1rem; min-height: 54px;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  color: var(--jord); text-decoration: none;
}
.nav a:hover { color: var(--kubota); }
/* Etiketterne ved siden af menupunkterne ("36 stk.", "Nyhed", "Fast
   rabat") vises som små brikker. Før stod de som løs tekst klods op ad
   menupunktet og lignede en hævet skrift. */
.nav a span {
  flex: none; white-space: nowrap;
  font-family: var(--mono); font-size: .68rem; font-weight: 500;
  color: var(--staal); background: var(--beton-lys);
  border: 1px solid var(--linje); border-radius: 999px;
  padding: .2rem .55rem; line-height: 1.4;
}

.nav__book {
  font-weight: 700; color: var(--kubota) !important;
}

/* ---------- Aktiv fane i menuen ----------
   Markeres med aria-current="page", som både skærmlæsere og CSS kan se.
   På mobil (listevisning) sættes en orange bjælke i venstre kant.
   På desktop en orange streg under teksten. */
.nav a[aria-current="page"] {
  color: var(--kubota);
  box-shadow: inset 3px 0 0 var(--kubota);
  padding-left: .8rem;
}
.nav a[aria-current="page"] span { color: var(--kubota); }
.nav a.nav__book[aria-current="page"] { box-shadow: none; padding-left: .2rem; }

@media (min-width: 900px) {
  .nav-knap { display: none; }
  .nav { display: block; border: 0; background: none; flex: 0 1 auto; order: 0; }
  .nav ul { display: flex; gap: .3rem; padding: 0; align-items: center; }
  .nav li + li { border: 0; }
  .nav a { padding: .5rem .7rem; min-height: 40px; font-size: .95rem; }
  .nav a span { display: none; }
  .hoved .indhold { padding-block: .85rem; }
  .nav__book {
    background: var(--kubota); color: var(--hvid) !important; border-radius: var(--radius);
    padding: .55rem 1.1rem !important; margin-left: .3rem;
  }
  .nav__book:hover { background: var(--kubota-mork); }

  /* Desktop: streg under den aktive fane i stedet for bjælke i siden */
  .nav a[aria-current="page"] {
    box-shadow: none; padding-left: .7rem;
    position: relative; color: var(--kubota);
  }
  .nav a[aria-current="page"]::after {
    content: ''; position: absolute;
    left: .7rem; right: .7rem; bottom: .1rem;
    height: 3px; border-radius: 2px; background: var(--kubota);
  }
  /* Book online er allerede en orange knap — dér ville en orange streg
     ikke kunne ses. Den markeres i stedet med den mørke brandfarve. */
  .nav a.nav__book[aria-current="page"] {
    background: var(--kubota-mork); color: var(--hvid) !important;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  }
  .nav a.nav__book[aria-current="page"]::after { display: none; }
}

/* =================================================================
   Hero — billedet er teksten. Booking ligger oveni med det samme.
   ================================================================= */
.hero { position: relative; background: var(--jord); }
.hero__foto { position: absolute; inset: 0; overflow: hidden; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0;
  /* To animationer samtidig: overtoningen styrer opacity, heroZoom giver
     et meget langsomt indzoom, så billedet lever i stedet for at stå
     dødt. Begge deler samme animation-delay pr. slide nedenfor. */
  animation: heroCrossfade 40s ease-in-out infinite,
             heroZoom 40s ease-in-out infinite;
  will-change: opacity, transform;
}
.hero__slide:nth-child(1) { animation-delay: 0s; }
.hero__slide:nth-child(2) { animation-delay: 8s; }
.hero__slide:nth-child(3) { animation-delay: 16s; }
.hero__slide:nth-child(4) { animation-delay: 24s; }
.hero__slide:nth-child(5) { animation-delay: 32s; }
@keyframes heroZoom {
  0%   { transform: scale(1.09); }
  21%  { transform: scale(1.005); }
  100% { transform: scale(1); }
}
@keyframes heroCrossfade {
  0%     { opacity: 0; }
  5%     { opacity: 1; }
  16%    { opacity: 1; }
  21%    { opacity: 0; }
  100%   { opacity: 0; }
}
/* Forløbningen over hero-billedet.
   Den gamle version faldt fra 99 % til 55 % dækning på bare 26 % af
   bredden — så stejlt at man kunne SE kanten som en lodret stribe lige
   omkring bookingkassen. Den nye har mange flere trin og et blødere
   forløb, så overgangen ikke kan ses. Venstre side er stadig helt
   mørk, så den hvide overskrift har fuld kontrast.
   Nederst er lagt en let mørkning på, så tallene i bunden også står
   rent, uanset hvad der er i billedet bag dem. */
.hero__foto::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(22,25,26,0) 55%,
      rgba(22,25,26,.28) 100%),
    linear-gradient(90deg,
      rgba(22,25,26,1)    0%,
      rgba(22,25,26,.985) 24%,
      rgba(22,25,26,.955) 34%,
      rgba(22,25,26,.90)  42%,
      rgba(22,25,26,.82)  49%,
      rgba(22,25,26,.71)  55%,
      rgba(22,25,26,.58)  61%,
      rgba(22,25,26,.45)  67%,
      rgba(22,25,26,.33)  73%,
      rgba(22,25,26,.22)  79%,
      rgba(22,25,26,.13)  85%,
      rgba(22,25,26,.06)  91%,
      rgba(22,25,26,.02)  96%,
      rgba(22,25,26,0)   100%);
}
.hero__krop {
  position: relative; z-index: 2;
  padding-block: clamp(2rem, 7vw, 5rem);
  color: var(--hvid);
}
/* På telefon er lodret plads dyrest. Overskrift, underrubrik og
   knapper rykkes tættere sammen, så bookingkassen kommer op over
   skærmkanten i stedet for at ligge og gemme sig under tallene. */
@media (max-width: 719px) {
  .hero .oejenbryn { font-size: .68rem; margin-bottom: .5rem; }
  .hero h1 { margin-bottom: .45rem; }
  .hero__under { font-size: 1.05rem; max-width: 32ch; margin-bottom: 1.15rem; }
  .hero__krop > div:first-child { margin-bottom: 1.4rem; }
}
.hero h1 { color: var(--hvid); margin-bottom: .55rem; }
.hero h1 em { font-style: normal; color: var(--kubota-lys); }
.hero__under {
  font-size: 1.2rem; max-width: 27ch; color: #e8eae7;
  line-height: 1.45; margin-bottom: 1.6rem;
}
.hero .oejenbryn { color: var(--kubota-lys); }
.hero .oejenbryn::after { background: rgba(255,255,255,.28); }

/* Bookingkassen — sitets vigtigste element */
.book {
  background: var(--hvid); color: var(--jord);
  border-radius: var(--radius); padding: 1.15rem;
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  border-top: 5px solid var(--kubota);
}
.book h2 {
  font-size: 1.12rem; margin-bottom: .9rem; letter-spacing: -.015em;
}
.gr360-widget {
  min-height: 260px; border-radius: var(--radius);
  background: var(--beton-lys);
}
.produkt__book .gr360-widget { min-height: 340px; }
.book-side {
  margin-top: 1.5rem; padding: 1.5rem;
  background: var(--hvid); border: 1px solid var(--linje);
  border-radius: var(--radius);
}
.book-side .gr360-widget { min-height: 500px; background: none; }
.book__raekke { display: grid; gap: .7rem; }
.book label {
  font-family: var(--brod); font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--staal);
  display: block; margin-bottom: .3rem;
}
.book select, .book input[type="date"] {
  width: 100%; min-height: 50px;
  font-family: var(--brod); font-size: 1rem; color: var(--jord);
  padding: .6rem .7rem;
  border: 2px solid var(--linje); border-radius: var(--radius);
  background: var(--beton-lys); appearance: none;
}
.book select:focus, .book input:focus { border-color: var(--jord); outline: none; }
.book__hjaelp {
  font-family: var(--brod); font-size: .82rem; color: var(--staal);
  margin: .8rem 0 0; text-align: center;
}
@media (min-width: 620px) {
  .book__raekke { grid-template-columns: 1fr 1fr; }
  .book__raekke > *:first-child { grid-column: 1 / -1; }
  .book__knap { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .hero__krop { display: grid; grid-template-columns: 1fr 400px; gap: 3rem; align-items: center; }
  .hero__under { font-size: 1.42rem; max-width: 24ch; }
}

/* Tillidsstribe lige under hero — orange banner der popper */
.tillid {
  background: var(--kubota); color: var(--hvid);
  font-family: var(--display); font-size: .88rem; font-weight: 700;
  letter-spacing: .02em;
}
.tillid ul {
  list-style: none; margin: 0; padding: .75rem 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: center;
}
.tillid li { display: flex; align-items: center; gap: .4rem; }
.tillid li::before {
  content: ''; width: 1em; height: 1em; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =================================================================
   Sektioner
   ================================================================= */
.baand { padding-block: clamp(2.6rem, 8vw, 4.6rem); }
.baand--beton { background: var(--beton-lys); }
.baand--jord { background: var(--jord); color: var(--beton); }
.baand--jord h2, .baand--jord h3 { color: var(--hvid); }
.baand--jord a { color: var(--kubota-lys); }
.baand__hoved { max-width: 60ch; margin-bottom: 2rem; }
.baand__hoved p { color: var(--staal); font-size: 1.06rem; }
.baand--jord .baand__hoved p { color: var(--staal-lys); }

/* ---------- Kategorigitter ---------- */
.kategorier { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
.kategori {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); background: var(--beton-lys);
  color: var(--hvid); text-decoration: none; min-height: 165px;
}
.kategori picture { position: absolute; inset: 0; }
/* Kategoribillederne er studiefotos på lys baggrund. De må IKKE dæmpes
   ned som de gamle mørke arbejdsfotos — så bliver den hvide bund grå og
   grumset. I stedet vises de i fuld styrke, og teksten står på en
   kraftig mørk bund kun i nederste tredjedel. */
.kategori img { opacity: 1; transition: transform .5s; height: 100%; }
.kategori:hover img { transform: scale(1.04); }
.kategori__tekst {
  position: relative; z-index: 2; padding: .95rem;
  display: flex; flex-direction: column; justify-content: flex-end; height: 100%;
  min-height: 165px;
  background: linear-gradient(180deg,
    rgba(22,25,26,0) 42%,
    rgba(22,25,26,.55) 66%,
    rgba(22,25,26,.92) 100%);
}
.kategori h3 { font-size: 1.02rem; margin: 0 0 .15rem; color: var(--hvid); }
.kategori span {
  font-family: var(--mono); font-size: .68rem; color: var(--kubota-lys);
  letter-spacing: .08em; text-transform: uppercase;
}
@media (min-width: 720px) { .kategorier { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Maskinkort ---------- */
.gitter { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .gitter { grid-template-columns: repeat(3, 1fr); } }

.kort {
  display: flex; flex-direction: column; gap: .7rem;
  background: var(--hvid);
  border: 1px solid var(--linje); border-radius: var(--radius);
  padding: .7rem; height: 100%;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.kort:hover { border-color: var(--jord); box-shadow: var(--skygge); transform: translateY(-2px); }
.kort__link { text-decoration: none; color: inherit; display: block; position: relative; }
.kort__foto {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); background: var(--beton);
}
.kort__foto img { transition: transform .5s ease; }
.kort:hover .kort__foto img { transform: scale(1.045); }
.kort__krop { padding: .8rem .2rem .1rem; }
.kort__navn { font-size: 1.06rem; margin: 0 0 .3rem; }
.kort__kort { font-size: .92rem; color: var(--staal); margin: 0; line-height: 1.5; }
.kort .skilt { margin-top: auto; }
.maerkat {
  position: absolute; top: .55rem; left: .55rem; z-index: 3;
  background: var(--kubota); color: var(--hvid);
  font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .5rem; border-radius: 2px;
}

/* =================================================================
   Produktside
   ================================================================= */
.krumme {
  font-family: var(--mono); font-size: .74rem; color: var(--staal);
  padding-block: .9rem; display: flex; flex-wrap: wrap; gap: .4rem;
}
.krumme a { color: var(--staal); text-decoration: none; }
.krumme a:hover { color: var(--kubota); text-decoration: underline; }

.produkt { display: grid; gap: 1.6rem; padding-bottom: 2.5rem; }
.produkt__foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--beton); }
.produkt h1 { margin-bottom: .3rem; }
.produkt__kort { font-size: 1.1rem; color: var(--staal); margin-bottom: 1.3rem; }
.produkt__book { display: grid; gap: .7rem; }
@media (min-width: 900px) {
  .produkt { grid-template-columns: 1.15fr 1fr; gap: 2.6rem; align-items: start; }
  .produkt__side { position: sticky; top: 5.5rem; }
}

.spec {
  width: 100%; border-collapse: collapse;
  font-family: var(--mono); font-size: .88rem; margin: 1.4rem 0;
}
.spec th, .spec td { text-align: left; padding: .62rem .3rem; border-bottom: 1px solid var(--linje); }
.spec th { font-weight: 500; color: var(--staal); width: 45%; }
.spec td { font-weight: 600; }

/* Specs pr. maskine — altid 2 kolonner, også på mobil */
.spec-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--linje); margin: 1.4rem 0;
}
.spec-grid__item { padding: .75rem .7rem; border-bottom: 1px solid var(--linje); min-width: 0; }
.spec-grid__item:nth-child(odd) { border-right: 1px solid var(--linje); }
.spec-grid__label {
  display: block; font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--staal); margin-bottom: .2rem;
}
.spec-grid__value { display: block; font-size: .92rem; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }

.liste { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.liste li {
  position: relative; padding-left: 1.6rem; margin-bottom: .5rem; font-size: .98rem;
}
.liste li::before {
  content: ''; position: absolute; left: 0; top: .2em; width: 1em; height: 1em;
  background-color: var(--kubota);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.liste--nej li::before {
  background-color: var(--staal-lys);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--linje); }
.faq details { border-bottom: 1px solid var(--linje); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem .2rem;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 54px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-family: var(--mono); font-size: 1.4rem;
  color: var(--kubota); flex-shrink: 0; line-height: 1;
}
.faq details[open] summary::after { content: '–'; }
.faq details > div { padding: 0 .2rem 1.2rem; color: var(--staal); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Byer ---------- */
.byer { display: grid; gap: .6rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .byer { grid-template-columns: repeat(4, 1fr); } }
.by {
  display: block; padding: 1rem .9rem; text-decoration: none;
  background: var(--hvid); border: 1px solid var(--linje); border-radius: var(--radius);
  transition: border-color .16s, transform .16s;
}
.by:hover { border-color: var(--kubota); transform: translateY(-2px); }
.by strong {
  display: block; font-family: var(--display); font-size: 1.05rem;
  color: var(--jord); letter-spacing: -.02em;
}
.by span { font-family: var(--mono); font-size: .7rem; color: var(--staal); }

/* ---------- Todelt tekst + foto ---------- */
.duo { display: grid; gap: 1.6rem; align-items: center; }
.duo__foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; }
.duo__foto--portraet { aspect-ratio: 3/4; }
.duo__foto--portraet img { object-position: center 12%; }
@media (min-width: 860px) {
  .duo { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .duo--vendt .duo__foto { order: 2; }
}

/* ---------- Anmeldelser ---------- */
.citat {
  background: var(--hvid); border: 1px solid var(--linje);
  border-left: 4px solid var(--kubota);
  border-radius: var(--radius); padding: 1.2rem;
}
.citat p { font-size: .98rem; margin-bottom: .8rem; }
.citat cite {
  font-family: var(--mono); font-size: .74rem; font-style: normal;
  color: var(--staal); letter-spacing: .04em;
}

/* ---------- Fakta-/prisboks ---------- */
.fakta {
  background: var(--beton-lys); border: 1px solid var(--linje);
  border-radius: var(--radius); padding: 1.2rem; margin: 1.6rem 0;
}
.fakta h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.fakta p:last-child { margin-bottom: 0; }
.fakta__tal {
  font-family: var(--mono); font-size: 1.6rem; font-weight: 600;
  color: var(--kubota); display: block; line-height: 1.2;
}

/* =================================================================
   Footer
   ================================================================= */
/* Footeren. Mere luft foroven, tydeligere hierarki i kolonnerne og
   en klar adskillelse fra det bundbånd, der ofte ligger lige over. */
.fod {
  background: var(--jord); color: var(--staal-lys);
  padding-block: 3.4rem 1.6rem; font-size: .94rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
/* Ligger der et bundbånd lige før footeren, har de samme farve. En
   tynd linje holder dem fra at smelte sammen til én stor mørk flade. */
.bundbaand + .fod,
main:has(.bundbaand:last-child) + .fod { border-top-color: rgba(255,255,255,.14); }
.fod h4 {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--kubota-lys);
  margin-bottom: 1rem; padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.fod a { color: var(--beton); text-decoration: none; }
.fod a:hover { color: var(--kubota-lys); text-decoration: underline; }
.fod ul { list-style: none; padding: 0; margin: 0; }
.fod li { margin-bottom: .55rem; }
.fod li a { display: inline-block; padding-block: .12rem; }   /* større tryk-mål på mobil */
.fod__gitter { display: grid; gap: 2.4rem 2.6rem; }
@media (min-width: 700px) { .fod__gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .fod__gitter--enkel { grid-template-columns: 1.5fr 1fr 1fr; } }
.fod__bund {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: 2.8rem; padding-top: 1.4rem;
  font-family: var(--mono); font-size: .72rem; color: var(--staal);
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; justify-content: space-between;
}
.fod__byer {
  margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .82rem; color: var(--staal);
}
.fod__byer a { color: var(--staal-lys); }
.fod__byer a:hover { color: var(--kubota-lys); }
.gruppen { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.gruppen a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  border: 1px solid rgba(255,255,255,.2); border-radius: 2px;
  padding: .42rem .7rem; text-decoration: none;
  transition: border-color .18s, background .18s, color .18s;
}
.gruppen a:hover {
  border-color: var(--kubota); background: var(--kubota);
  color: var(--hvid); text-decoration: none;
}

/* =================================================================
   Fast handlingsbjælke i bunden på mobil
   ================================================================= */
.mobilbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--linje);
  box-shadow: 0 -6px 22px rgba(0,0,0,.14);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobilbar a {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 56px; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: .98rem;
}
.mobilbar .m-ring { background: var(--hvid); color: var(--jord); }
.mobilbar .m-book { background: var(--kubota); color: var(--hvid); }
.mobilbar svg { width: 18px; height: 18px; }
body { padding-bottom: 60px; }
@media (min-width: 900px) {
  .mobilbar { display: none; }
  body { padding-bottom: 0; }
}

/* Varsel (fx ferielukket) */
.varsel {
  background: var(--kubota); color: var(--hvid);
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  text-align: center; padding: .6rem 1rem;
}
.varsel strong { font-weight: 700; }

/* =================================================================
   Vejrudsigt — 5 dage for Horsens, hentet klient-side
   ================================================================= */
.vejr {
  background: var(--hvid); color: var(--jord);
  border-radius: var(--radius); padding: .7rem .8rem;
  border-top: 3px solid var(--kubota);
  box-shadow: var(--skygge);
}
.vejr__top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .5rem; flex-wrap: wrap; }
.vejr__by {
  font-family: var(--display); font-weight: 800; font-size: .92rem; letter-spacing: -.01em;
}
.vejr__kilde { font-family: var(--brod); font-size: .64rem; color: var(--staal); text-decoration: none; }
.vejr__kilde:hover { color: var(--kubota); }
.vejr__dage { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
.vejr__dag {
  text-align: center; background: var(--beton-lys); border-radius: 3px;
  padding: .35rem .2rem .3rem;
}
.vejr__dag-navn {
  display: block; font-family: var(--brod); font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: var(--staal);
}
.vejr__ikon { display: block; font-size: 1.2rem; line-height: 1.3; margin: .1rem 0; }
.vejr__hoej { display: block; font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--jord); }
.vejr__lav { display: block; font-size: .66rem; color: var(--staal); }
.vejr__nedboer {
  display: block; font-family: var(--brod); font-size: .58rem; color: var(--kubota-mork); margin-top: .15rem;
}
.vejr__fejl { font-size: .85rem; color: var(--staal-lys); text-align: center; padding: .5rem 0; }
.vejr__fejl a { color: var(--kubota-lys); }
@media (max-width: 420px) {
  .vejr__ikon { font-size: 1rem; }
  .vejr__hoej { font-size: .74rem; }
  .vejr__lav { font-size: .6rem; }
}

/* =================================================================
   Tip-bokse — små gør-det-selv-sætninger drysset rundt på sitet
   ================================================================= */
.tip {
  position: relative;
  background: var(--beton-lys); border: 1px dashed var(--staal-lys);
  border-radius: var(--radius); padding: .9rem 1rem .9rem 1rem;
  margin: 1.6rem 0;
}
.tip__label {
  display: inline-block; font-family: var(--mono); font-size: .64rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--kubota);
  background: var(--hvid); border: 1px solid var(--staal-lys); border-radius: 2px;
  padding: .12rem .45rem; margin-bottom: .4rem;
}
.tip p { margin: 0; font-size: .94rem; font-style: italic; color: var(--jord); }
.baand--jord .tip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); }
.baand--jord .tip p { color: var(--beton); }
.baand--jord .tip__label { background: var(--jord); color: var(--kubota-lys); border-color: rgba(255,255,255,.25); }

/* =================================================================
   Artikler
   ================================================================= */
.artikel-gitter { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .artikel-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .artikel-gitter { grid-template-columns: repeat(3, 1fr); } }

.artikel-kort {
  display: block; text-decoration: none; color: inherit;
  background: var(--hvid); border: 1px solid var(--linje); border-radius: var(--radius);
  overflow: hidden; transition: border-color .18s, transform .18s, box-shadow .18s;
}
.artikel-kort:hover { border-color: var(--jord); transform: translateY(-2px); box-shadow: var(--skygge); }
.artikel-kort__foto { aspect-ratio: 4/3; background: var(--jord); overflow: hidden; }
.artikel-kort__foto img { width: 100%; height: 100%; object-fit: cover; }
.artikel-kort__krop { padding: .9rem 1rem 1.1rem; }
.artikel-kort__titel { font-size: 1.02rem; margin: 0 0 .35rem; color: var(--jord); }
.artikel-kort__kort { font-size: .88rem; color: var(--staal); margin: 0; line-height: 1.5; }

.artikel__medie { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; background: var(--jord); margin: 1.2rem 0 1.6rem; }
.artikel__medie-img, .artikel__medie video { width: 100%; height: 100%; object-fit: cover; display: block; }
.artikel__medie-img--generisk { object-fit: contain; background: var(--jord); padding: 1rem; }
.artikel__krop p { font-size: 1.02rem; }
.artikel__relateret {
  background: var(--beton-lys); border-left: 4px solid var(--kubota);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1.8rem 0;
}
.artikel__relateret a { font-weight: 700; }

/* =================================================================
   Booking-widget — indlejret GoRental360 på produktsider
   ================================================================= */
.booking-widget { margin-top: 1rem; }
.booking-widget__iframe {
  width: 100%; min-height: 460px; border: 1px solid var(--linje);
  border-radius: var(--radius); background: var(--beton-lys);
}
.booking-widget--tom {
  background: var(--beton-lys); border: 1px solid var(--linje);
  border-radius: var(--radius); padding: 1.1rem;
}
.booking-widget--tom p { margin: 0 0 .7rem; font-size: .94rem; }
.booking-widget--tom p:first-child { font-size: 1rem; }

/* =================================================================
   Projektvælger — "Hvad skal du bruge?"
   Bruger <details> så det virker helt uden JavaScript og matcher
   FAQ-mønsteret, folk allerede kender fra resten af sitet.
   ================================================================= */
.projekter { display: grid; gap: .6rem; }
.projekt {
  background: var(--hvid); border: 1px solid var(--linje);
  border-radius: var(--radius); overflow: hidden;
}
.projekt[open] { border-color: var(--jord); }
.projekt summary {
  cursor: pointer; list-style: none; padding: 1rem 1rem;
  display: flex; align-items: center; gap: .8rem; min-height: 56px;
}
.projekt summary::-webkit-details-marker { display: none; }
.projekt__ikon { flex-shrink: 0; color: var(--kubota); }
.projekt__ikon .ikon { width: 1.6rem; height: 1.6rem; }
.projekt__titel {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--jord); flex: 1;
}
.projekt__pil {
  font-family: var(--mono); color: var(--kubota); font-size: 1.3rem;
  flex-shrink: 0; transition: transform .2s;
}
.projekt[open] .projekt__pil { transform: rotate(45deg); }
.projekt__krop { padding: 0 1rem 1.2rem; border-top: 1px solid var(--beton); }
.projekt__tekst { color: var(--staal); font-size: .92rem; margin: .9rem 0 1rem; }
.projekt__gitter { display: grid; gap: .8rem; grid-template-columns: 1fr; margin-bottom: .9rem; }
@media (min-width: 560px) { .projekt__gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .projekt__gitter { grid-template-columns: repeat(3, 1fr); } }

/* =================================================================
   Afstemning — "Stem på næste maskine"
   ================================================================= */
.stem-besked {
  padding: .9rem 1.1rem; border-radius: var(--radius); font-weight: 600;
  margin: 1.2rem 0; font-size: .95rem;
}
.stem-besked--ok { background: #e5f6ea; color: #14532d; border: 1px solid #1a7a3c; }
.stem-besked--fejl { background: #fde8e5; color: var(--kubota-mork); border: 1px solid var(--kubota); }

.stem-gitter { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .stem-gitter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .stem-gitter { grid-template-columns: repeat(3, 1fr); } }

.stem-kort {
  background: var(--hvid); border: 2px solid var(--linje); border-radius: var(--radius);
  padding: 1.1rem; display: flex; flex-direction: column; scroll-margin-top: 5.5rem;
  transition: border-color .2s, transform .2s;
}
.stem-kort:target { border-color: var(--advarsel); transform: translateY(-2px); }
.stem-kort__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.stem-kort__ikon { color: var(--kubota); }
.stem-kort__ikon .ikon { width: 2.1rem; height: 2.1rem; }
.stem-kort__rang {
  font-family: var(--mono); font-weight: 700; font-size: .82rem;
  background: var(--advarsel); color: var(--jord); border-radius: 999px;
  padding: .2rem .55rem;
}
.stem-kort__navn { font-size: 1.08rem; margin: 0 0 .4rem; }
.stem-kort__omtale { font-size: .86rem; color: var(--staal); line-height: 1.5; margin: 0 0 1rem; flex: 1; }

.stem-fremgang { margin-bottom: .9rem; }
.stem-fremgang__bar {
  height: 10px; background: var(--beton); border-radius: 5px; overflow: hidden; margin-bottom: .35rem;
}
.stem-fremgang__fyld {
  height: 100%; background: linear-gradient(90deg, var(--advarsel), var(--kubota));
  border-radius: 5px; transition: width .4s ease;
}
.stem-fremgang__tekst { font-family: var(--mono); font-size: .72rem; color: var(--staal); font-weight: 600; }

.stem-status {
  font-family: var(--mono); font-size: .82rem; font-weight: 600; color: var(--kubota);
  background: var(--beton-lys); border-radius: var(--radius); padding: .7rem .8rem; margin: 0; text-align: center;
}

/* Stemme-formularen gemmer sig bag et <details>, så siden ikke er fyldt med felter fra start */
.stem-form-toggle summary { list-style: none; cursor: pointer; }
.stem-form-toggle summary::-webkit-details-marker { display: none; }
.stem-form-toggle[open] summary { margin-bottom: .7rem; }
.stem-form { display: grid; gap: .55rem; margin-top: .2rem; }
.stem-form input[type="text"], .stem-form input[type="email"] {
  width: 100%; min-height: 46px; padding: .6rem .7rem;
  border: 2px solid var(--linje); border-radius: var(--radius);
  font-family: var(--brod); font-size: .95rem; background: var(--beton-lys);
}
.stem-form input:focus { border-color: var(--jord); outline: none; background: var(--hvid); }
.stem-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.stem-form__to-kolonner { display: grid; gap: .55rem; grid-template-columns: 1fr; }
@media (min-width: 480px) { .stem-form__to-kolonner { grid-template-columns: 1fr 1fr; } }

.stem-forslagsliste { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.8rem; }
.stem-forslag {
  background: var(--beton-lys); border: 1px solid var(--linje); border-radius: var(--radius);
  padding: 1rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.stem-forslag__info { flex: 1; min-width: 200px; }
.stem-forslag__info strong { display: block; margin-bottom: .4rem; font-size: 1rem; }
.stem-form--nyt-forslag {
  background: var(--hvid); border: 2px dashed var(--staal-lys); border-radius: var(--radius); padding: 1.2rem;
}
.stem-form--nyt-forslag label {
  display: block; font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  color: var(--staal); margin-bottom: .3rem;
}

/* =================================================================
   Ikoner — erstatter emojis overalt. Rene SVG-stregikoner.
   ================================================================= */
.ikon {
  width: 1.3em; height: 1.3em; display: inline-block; vertical-align: -0.22em;
  flex-shrink: 0;
}
.ikon--stor { width: 2.1rem; height: 2.1rem; }
.ikon--xstor { width: 2.6rem; height: 2.6rem; }

/* =================================================================
   Team-kort — "Mød teamet" på kontaktsiden
   ================================================================= */
.team-gitter { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.team-kort { text-align: center; }
.team-kort__foto {
  aspect-ratio: 1/1; border-radius: 999px; overflow: hidden;
  margin: 0 auto .8rem; max-width: 160px; border: 3px solid var(--beton-lys);
}
.team-kort__navn { display: block; font-family: var(--display); font-size: 1rem; color: var(--jord); }
.team-kort__rolle {
  display: block; font-family: var(--mono); font-size: .74rem;
  color: var(--staal); margin-top: .2rem;
}
@media (max-width: 480px) {
  .team-kort__foto { max-width: 130px; }
}

/* =================================================================
   Én gruppe — krydsbrand-sektion (CGR / CEMA / CEGA)
   ================================================================= */
.gruppe-gitter { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-bottom: 2.2rem; }
@media (min-width: 720px) { .gruppe-gitter { grid-template-columns: repeat(3, 1fr); } }
.gruppe-kort {
  display: flex; flex-direction: column; gap: .3rem; text-decoration: none;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 1.3rem 1.2rem; transition: border-color .18s, transform .18s;
}
.gruppe-kort:hover { border-color: var(--advarsel); transform: translateY(-2px); }
.gruppe-kort--aktiv { background: var(--kubota); border-color: var(--kubota); }
.gruppe-kort__navn { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--hvid); letter-spacing: -.01em; }
.gruppe-kort__titel {
  font-family: var(--brod); font-weight: 700; font-size: .84rem;
  color: var(--advarsel); text-transform: uppercase; letter-spacing: .03em;
}
.gruppe-kort--aktiv .gruppe-kort__titel { color: var(--hvid); }
.gruppe-kort__tekst { font-size: .88rem; color: var(--staal-lys); line-height: 1.5; margin-top: .2rem; }
.gruppe-kort--aktiv .gruppe-kort__tekst { color: rgba(255,255,255,.85); }

.stats-bar {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 1.8rem;
}
@media (min-width: 640px) { .stats-bar { grid-template-columns: repeat(4, 1fr); } }
.stats-bar__stat { text-align: center; }
.stats-bar__stat strong {
  display: block; font-family: var(--display); font-weight: 800; font-size: 1.9rem;
  color: var(--advarsel); line-height: 1.1;
}
.stats-bar__stat span { display: block; font-size: .82rem; color: var(--staal-lys); margin-top: .25rem; }

/* =================================================================
   Historie-tidslinje (kontaktsiden)
   ================================================================= */
.historie { margin-top: 3rem; padding-top: 2.5rem; border-top: 3px solid var(--jord); }
.historie__intro { max-width: 62ch; }

.tidslinje { list-style: none; margin: 2rem 0 0; padding: 0; position: relative; }
.tidslinje::before {
  content: ''; position: absolute; left: 7px; top: .6rem; bottom: .6rem;
  width: 2px; background: var(--linje);
}
.tidslinje > li { position: relative; padding: 0 0 2rem 2.2rem; }
.tidslinje > li::before {
  content: ''; position: absolute; left: 0; top: .45rem;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--hvid); border: 3px solid var(--kubota);
}
.tidslinje > li:last-child { padding-bottom: 0; }
.tidslinje__aar {
  display: inline-block; font-family: var(--mono); font-size: .78rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--kubota); margin-bottom: .15rem;
}
.tidslinje h3 { font-size: 1.12rem; margin: 0 0 .4rem; }
.tidslinje p { margin: 0 0 .6rem; max-width: 62ch; }
.tidslinje figure { margin: .9rem 0 0; max-width: 520px; }
.tidslinje figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.tidslinje figcaption {
  font-size: .8rem; color: var(--staal); margin-top: .45rem;
  border-left: 2px solid var(--linje); padding-left: .6rem;
}

.historie__idag {
  margin-top: 2rem; background: var(--jord); color: var(--beton);
  border-radius: var(--radius); padding: 1.6rem 1.4rem;
}
.historie__idag.bundbaand { border-radius: 0; }
.historie__idag h3 { color: var(--hvid); margin: 0 0 .6rem; }
.historie__idag p { max-width: 64ch; margin: 0 0 .8rem; }
.historie__idag a { color: var(--kubota-lys); font-weight: 600; }

@media (min-width: 760px) {
  .tidslinje > li { padding-left: 2.6rem; }
  .historie__idag { padding: 2rem 1.9rem; }
}

/* Transportmærkater på produktkort — "Kun levering" / "Kræver maskintrailer".
   Ligger modsat Populær-mærkatet, så de to aldrig overlapper. */
.maerkat--transport {
  left: auto; right: .55rem;
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--jord); color: var(--hvid);
  max-width: calc(100% - 1.1rem); text-align: right;
  letter-spacing: .06em;
}
.maerkat--transport svg { width: 12px; height: 12px; flex: none; }

/* Transportbesked på produktsiden */
.transport {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: .9rem; padding: .8rem .9rem;
  background: var(--beton-lys); border-left: 3px solid var(--kubota);
  border-radius: var(--radius);
}
.transport svg { width: 20px; height: 20px; flex: none; margin-top: .1rem; color: var(--kubota); }
.transport strong { display: block; font-size: .92rem; margin-bottom: .15rem; }
.transport p { margin: 0; font-size: .86rem; color: var(--staal); max-width: 52ch; }

/* =================================================================
   Samtykkebanner (cookies / GA4)
   Ligger over mobilbaren på telefon, så den ikke dækker knapperne.
   ================================================================= */
.samtykke {
  position: fixed; left: 0; right: 0; bottom: 60px; z-index: 130;
  background: var(--jord); color: var(--beton);
  border-top: 3px solid var(--kubota);
  box-shadow: 0 -8px 26px rgba(0,0,0,.22);
  padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom));
}
.samtykke[hidden] { display: none; }
.samtykke__krop {
  max-width: var(--maks); margin: 0 auto;
  display: flex; flex-direction: column; gap: .9rem;
}
.samtykke__tekst { margin: 0; font-size: .88rem; line-height: 1.5; max-width: 78ch; }
.samtykke__tekst strong { color: var(--hvid); display: block; margin-bottom: .2rem; }
.samtykke__knapper { display: flex; gap: .6rem; }
.samtykke__knapper .knap { flex: 1; }
.samtykke .knap--klar { background: transparent; color: var(--beton); border-color: var(--staal); }
.samtykke .knap--klar:hover { background: rgba(255,255,255,.08); border-color: var(--beton); }

@media (min-width: 900px) {
  .samtykke { bottom: 0; padding: 1.1rem 1.2rem; }
  .samtykke__krop { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  .samtykke__knapper { flex: none; }
  .samtykke__knapper .knap { flex: none; min-width: 130px; }
}

/* =================================================================
   "Ring mig op" — leadformular på produktsiderne
   ================================================================= */
.opkald {
  margin-top: 2.5rem; padding: 1.6rem 1.3rem;
  background: var(--beton-lys); border: 1px solid var(--linje);
  border-left: 4px solid var(--kubota); border-radius: var(--radius);
}
/* Som bundbånd overtager .bundbaand baggrund, kant og afstand.
   Det er kun felterne indeni, der skal justeres til mørk bund. */
.opkald.bundbaand .opkald__intro { color: var(--staal-lys); max-width: 58ch; margin-inline: auto; }
.opkald.bundbaand .opkald__felt label { color: var(--beton); }
.opkald.bundbaand .opkald__felt label span { color: var(--staal); }
.opkald.bundbaand .opkald__note { color: var(--staal); }

.opkald__titel { margin: 0 0 .4rem; font-size: 1.28rem; }
.opkald__intro { margin: 0 0 1.2rem; max-width: 58ch; color: var(--staal); font-size: .93rem; }
.opkald__form { display: grid; gap: .8rem; max-width: 460px; }
.opkald__felt { display: flex; flex-direction: column; gap: .3rem; }
.opkald__felt label {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--jord);
}
.opkald__felt label span { color: var(--staal); font-weight: 500; text-transform: none; letter-spacing: 0; }
.opkald__felt input {
  font-family: var(--brod); font-size: 1rem; padding: .7rem .8rem;
  border: 1px solid var(--linje); border-radius: var(--radius);
  background: var(--hvid); color: var(--jord); width: 100%;
}
.opkald__felt input:focus {
  outline: 2px solid var(--kubota); outline-offset: 1px; border-color: var(--kubota);
}
.opkald__note { margin: 0; font-size: .78rem; color: var(--staal); max-width: 52ch; }
.opkald__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.opkald__kvit {
  margin: 0 0 1rem; padding: .85rem 1rem; border-radius: var(--radius);
  font-weight: 600; font-size: .95rem;
}
.opkald__kvit--ok   { background: #1f6b3a; color: #fff; }
.opkald__kvit--fejl { background: #fdecea; color: #8a2317; border: 1px solid #f0b6ae; }

@media (min-width: 620px) {
  .opkald { padding: 1.9rem 1.7rem; }
  .opkald__form { grid-template-columns: 1fr 1fr; }
  .opkald__form > .opkald__felt:nth-child(4) { grid-column: 1 / -1; }
  .opkald__form > button,
  .opkald__form > .opkald__note { grid-column: 1 / -1; }
}




/* =================================================================
   SEO-tekst under booking-widgetten
   ================================================================= */
.bookseo { margin-top: 3rem; padding-top: 2.2rem; border-top: 3px solid var(--jord); }
.bookseo h2 { margin-bottom: .6rem; }
.bookseo h3 { margin: 1.9rem 0 .5rem; }
.bookseo p, .bookseo ul { max-width: 68ch; }
.bookseo ul { padding-left: 1.15rem; }
.bookseo li { margin-bottom: .35rem; }
.bookseo__faktaboks {
  margin: 1.6rem 0; padding: 1.2rem 1.3rem;
  background: var(--beton-lys); border-left: 4px solid var(--kubota);
  border-radius: var(--radius);
}
.bookseo__faktaboks p:last-child { margin-bottom: 0; }

/* =================================================================
   Trustpilot-anmeldelser
   Stjernerne bruger Trustpilots egen grønne, fordi det er den farve,
   folk genkender som "verificeret anmeldelse". Alt andet i afsnittet
   holder sig til sitets egne farver.
   ================================================================= */
.tp-stjerner { display: inline-flex; gap: 2px; }
.tp-stjerner svg {
  width: 20px; height: 20px; fill: #00b67a; flex: none;
}
.tp-stjerner--lille svg { width: 15px; height: 15px; }

.tp-score {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-bottom: 1.4rem; padding: .9rem 1.1rem;
  background: var(--hvid); border: 1px solid var(--linje);
  border-radius: var(--radius);
}
.tp-score__tal {
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  color: var(--jord);
}
.tp-score__antal { font-size: .9rem; color: var(--staal); }
.tp-score__link {
  margin-left: auto; font-family: var(--mono); font-size: .78rem;
  font-weight: 600; white-space: nowrap;
}

.citat__titel {
  display: block; font-family: var(--display); font-size: 1rem;
  margin: .6rem 0 .35rem; color: var(--jord);
}
.citat p { font-size: .95rem; margin-bottom: .8rem; }

/* =================================================================
   Karrusel — bruges til anmeldelserne
   Almindelig vandret scroll med scroll-snap. Virker med fingeren på
   mobil uden JavaScript; pile og prikker er bare en genvej ovenpå.
   ================================================================= */
.karrusel { position: relative; }
.karrusel__spor {
  display: flex; gap: 1.1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: .3rem;
}
.karrusel__spor::-webkit-scrollbar { display: none; }
.karrusel__kort {
  flex: 0 0 100%; scroll-snap-align: start;
  display: flex; flex-direction: column; margin: 0;
}
/* Navn og dato skubbes ned i bunden, så alle kort flugter,
   uanset hvor lang anmeldelsen er */
.karrusel__kort cite { margin-top: auto; padding-top: .5rem; }

.karrusel__pil {
  display: none; position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--hvid); border: 1px solid var(--linje);
  color: var(--jord); cursor: pointer;
  align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: background .18s, border-color .18s, opacity .18s;
}
.karrusel__pil svg { width: 20px; height: 20px; }
.karrusel__pil:hover:not(:disabled) { background: var(--kubota); border-color: var(--kubota); color: var(--hvid); }
.karrusel__pil:disabled { opacity: .3; cursor: default; }
.karrusel__pil--bak  { left: -14px; }
.karrusel__pil--frem { right: -14px; }

.karrusel__prikker {
  display: flex; justify-content: center; gap: .45rem; margin-top: 1.1rem;
}
.karrusel__prik {
  width: 9px; height: 9px; padding: 0; border-radius: 50%;
  border: 0; background: var(--linje); cursor: pointer;
  transition: background .18s, width .18s;
}
.karrusel__prik[aria-current="true"] { background: var(--kubota); width: 26px; border-radius: 5px; }

@media (min-width: 560px) {
  .karrusel__kort { flex-basis: calc(50% - .55rem); }
}
@media (min-width: 940px) {
  .karrusel__kort { flex-basis: calc(25% - .83rem); }
  .karrusel__pil { display: inline-flex; }
  .karrusel__pil--bak  { left: -20px; }
  .karrusel__pil--frem { right: -20px; }
}

/* Brødtekst-afsnit på oversigtssider, der ellers kun ville være
   en gitter af kort (og dermed for tynde til at rangere) */
.sideseo { margin-top: 2.6rem; padding-top: 2rem; border-top: 3px solid var(--jord); }
.sideseo h2 { margin-bottom: .6rem; }
.sideseo h3 { margin: 1.8rem 0 .5rem; }
.sideseo p, .sideseo ul { max-width: 68ch; }
.sideseo ul { padding-left: 1.15rem; }
.sideseo li { margin-bottom: .4rem; }

/* Trinvis fremgangsmåde inde i et projektkort på forsiden */
.projekt__trin {
  margin: 0 0 1.2rem; padding-left: 1.4rem;
  max-width: 66ch; counter-reset: trin;
}
.projekt__trin li {
  margin-bottom: .45rem; padding-left: .2rem;
}
.projekt__trin li::marker {
  font-family: var(--mono); font-weight: 600; font-size: .85em; color: var(--kubota);
}

/* LER-advarsel — vises alle steder, hvor kunden kan komme til at grave */
.ler {
  display: flex; gap: .8rem; align-items: flex-start;
  margin: 1.4rem 0; padding: .95rem 1.05rem;
  background: #fff6e9; border: 1px solid #f0d3a4;
  border-left: 4px solid #d98324; border-radius: var(--radius);
}
.ler svg { width: 22px; height: 22px; flex: none; margin-top: .12rem; color: #b8681a; }
.ler strong { display: block; font-size: .95rem; margin-bottom: .2rem; color: var(--jord); }
.ler p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--jord); max-width: 66ch; }
.ler a { font-weight: 600; }

/* =================================================================
   BUNDBÅND — de sidste kasser på en side
   Går fra kant til kant i samme mørke farve som footeren, så siden
   slutter med en tydelig, rolig blok.

   VIGTIGT OM PLACERING I HTML: båndet SKAL ligge uden for .indhold,
   som et direkte barn af <main>. Første forsøg brugte negative
   margener til at trække båndet ud fra inde i indholdskolonnen — det
   virker kun, hvis forælderen er centreret i vinduet. På produktsiden
   ligger teksten i en smal, forskudt kolonne, og dér nåede båndet ikke
   ud til højre kant. Der findes ingen CSS-teknik, der løser dét; det
   skal fikses i markupen.

   Selve båndet er derfor helt enkelt: fuld bredde, og et indre
   max-width-lag holder indholdet på linje med resten af siden.
   ================================================================= */
.bundbaand {
  margin-top: 3.5rem;
  padding-block: 3rem 3.2rem;
  background: var(--jord);
  color: var(--beton);
  border: 0; border-radius: 0;
  border-top: 4px solid var(--kubota);
}
/* Alt i båndet centreres. Første forsøg lod hvert element finde sin
   egen bredde inden for max-width — men fordi overskrift, brødtekst og
   formular har forskellige naturlige bredder, endte de med at starte
   tre forskellige steder på linjen. Det så tilfældigt ud. Én centreret
   kolonne er både enklere og roligere. */
.bundbaand { text-align: center; }
.bundbaand > * {
  width: 100%; max-width: var(--maks);
  margin-inline: auto; padding-inline: 1.1rem;
}
.bundbaand p { margin-inline: auto; }
.bundbaand h2,
.bundbaand h3,
.bundbaand .opkald__titel {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.7rem, 4.2vw, 2.6rem);
  line-height: 1.08; letter-spacing: -.02em;
  color: var(--hvid); margin: 0 auto .7rem;
}
.bundbaand p { color: var(--beton); max-width: min(62ch, var(--maks)); }
/* Selve formularen centreres som blok, men felterne indeni står
   venstrestillet — en label, der svæver over midten af sit felt, er
   svær at koble til feltet. */
.bundbaand .opkald__form {
  max-width: 520px; margin-inline: auto; text-align: left;
}
.bundbaand .opkald__note { margin-inline: auto; }
.bundbaand a { color: var(--kubota-lys); }
.bundbaand strong { color: var(--hvid); }
.bundbaand > *:last-child { margin-bottom: 0; }

/* =================================================================
   C-MÆRKET SOM VANDMÆRKE
   Kun i footeren og i bundbåndene — altså dér, hvor siden slutter.

   Første forsøg lagde det også på alle mellemliggende bånd, og på de
   lyse med placering i venstre side. Det blev rodet: mærket blev
   klippet skævt over af sektionskanten flere steder på vej ned gennem
   siden, og gentagelsen fik det til at ligne et mønster frem for et
   mærke. Ét sted, nederst, virker bedre end seks.

   Det ligger nederst til højre og løber en anelse ud over kanten, så
   det ligner en bevidst afskæring frem for et billede, der ikke kunne
   være der.
   ================================================================= */
.bundbaand, .fod { position: relative; overflow: hidden; }
.bundbaand > *, .fod > * { position: relative; z-index: 1; }

.bundbaand::after,
.fod::after {
  content: '';
  position: absolute; pointer-events: none;
  background: url('/assets/img/c-maerke-hvid.svg?v=2') no-repeat right bottom / contain;
  opacity: .05;
  width: clamp(200px, 22vw, 320px);
  aspect-ratio: 1;
  right: -3%; bottom: -14%;
}

/* På telefon er der ikke plads. Mærket ville lægge sig hen over
   teksten frem for at ligge bag den. */
@media (max-width: 700px) {
  .bundbaand::after, .fod::after { display: none; }
}

/* =================================================================
   "3 vigtige råd" på artikelsiderne
   Rigtig tekst i HTML frem for tekst brændt ind i et billede: den kan
   markeres, læses op af skærmlæsere, oversættes, indekseres af Google
   og rettes uden at generere billedet forfra.
   ================================================================= */
.raad {
  margin: 1.8rem 0 2.2rem;
  background: var(--jord); color: var(--beton);
  border-left: 5px solid var(--kubota);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.raad h2 {
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--kubota-lys); margin: 0 0 .9rem;
}
.raad ol { margin: 0; padding-left: 1.4rem; counter-reset: raad; }
.raad li {
  margin-bottom: .7rem; line-height: 1.55; max-width: 62ch;
}
.raad li:last-child { margin-bottom: 0; }
.raad li::marker {
  font-family: var(--display); font-weight: 800;
  color: var(--kubota); font-size: 1.05em;
}

/* =================================================================
   ARTIKEL-KOMPONENTER
   Faktaboks, trin, udstyrsliste, indkøbsliste, fejl og FAQ.
   Samme formsprog som resten af sitet: skarpe kanter, orange accent,
   mono til labels og tal. Mobilførst — alt stakker i én kolonne
   under 620 px.
   ================================================================= */

/* ---------- Faktaboks ---------- */
.afakta {
  border: 1px solid var(--linje); border-top: 3px solid var(--kubota);
  border-radius: var(--radius); background: var(--beton-lys);
  padding: 1.1rem 1.2rem; margin: 1.6rem 0;
}
.afakta__titel {
  font-family: var(--mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kubota);
  margin: 0 0 .8rem;
}
.afakta__grid { display: grid; grid-template-columns: 1fr; gap: .7rem; margin: 0; }
@media (min-width: 620px) { .afakta__grid { grid-template-columns: 1fr 1fr; gap: .8rem 1.6rem; } }
.afakta__post { min-width: 0; }
.afakta__post dt {
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--staal);
  margin-bottom: .12rem;
}
.afakta__post dd {
  margin: 0; font-size: .95rem; font-weight: 600; line-height: 1.4;
  overflow-wrap: break-word;
}

/* ---------- Trin for trin ---------- */
.atrin { margin: 2.2rem 0; }
.atrin > h2 { font-size: 1.5rem; margin-bottom: 1.1rem; }
.atrin__liste { list-style: none; margin: 0; padding: 0; counter-reset: atrin; }
.atrin__post {
  counter-increment: atrin; position: relative;
  padding: 0 0 1.2rem 3rem; margin: 0;
  border-left: 2px solid var(--linje); margin-left: 1rem;
}
.atrin__post:last-child { border-left-color: transparent; padding-bottom: 0; }
.atrin__post::before {
  content: counter(atrin);
  position: absolute; left: -1.05rem; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--kubota); color: var(--hvid);
  font-family: var(--display); font-weight: 800; font-size: .92rem;
  display: flex; align-items: center; justify-content: center;
}
.atrin__titel { font-size: 1.06rem; margin: .15rem 0 .3rem; }
.atrin__tid {
  display: inline-block; font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .06em; color: var(--staal);
  background: var(--beton-lys); border: 1px solid var(--linje); border-radius: 2px;
  padding: .1rem .45rem; margin-bottom: .45rem;
}
.atrin__post p { margin: 0; font-size: .97rem; line-height: 1.58; }

/* ---------- Det skal du bruge fra os ---------- */
.audstyr {
  margin: 2.2rem 0; padding: 1.3rem 1.3rem 1.1rem;
  background: var(--jord); color: var(--beton);
  border-radius: var(--radius); border-left: 5px solid var(--kubota);
}
.audstyr h2 { color: var(--hvid); font-size: 1.4rem; margin-bottom: .9rem; }
.audstyr__liste { list-style: none; margin: 0; padding: 0; }
.audstyr__post {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem;
  padding: .75rem 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.audstyr__post:last-of-type { border-bottom: 0; }
.audstyr__navn {
  font-weight: 700; color: var(--hvid); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.3); justify-self: start;
}
.audstyr__navn:hover { color: var(--kubota-lys); border-bottom-color: var(--kubota-lys); }
.audstyr__pris {
  font-family: var(--mono); font-weight: 600; font-size: .95rem;
  color: var(--kubota-lys); white-space: nowrap; text-align: right;
}
.audstyr__pris small { font-size: .72rem; opacity: .75; font-weight: 400; }
.audstyr__hvorfor {
  grid-column: 1 / -1; font-size: .89rem; line-height: 1.5;
  color: var(--staal-lys); max-width: 62ch;
}
.audstyr__sum {
  margin: .9rem 0 0; padding-top: .9rem; font-size: .92rem;
  border-top: 1px solid rgba(255,255,255,.2); color: var(--beton);
}
.audstyr__sum strong { color: var(--hvid); }
.audstyr__sum a { color: var(--kubota-lys); }
.audstyr__cta { margin: 1rem 0 0; }

/* ---------- Det skal du selv have hjem ---------- */
.akob { margin: 2rem 0; }
.akob h2 { font-size: 1.4rem; margin-bottom: .7rem; }
.akob ul { margin: 0; padding-left: 1.2rem; }
.akob li { margin-bottom: .45rem; font-size: .97rem; line-height: 1.55; max-width: 64ch; }

/* ---------- Typiske fejl ---------- */
.afejl {
  margin: 2rem 0; padding: 1.2rem 1.3rem;
  background: var(--beton-lys); border: 1px solid var(--linje);
  border-left: 5px solid var(--staal); border-radius: var(--radius);
}
.afejl h2 { font-size: 1.3rem; margin-bottom: .7rem; }
.afejl ul { margin: 0; padding-left: 1.2rem; }
.afejl li { margin-bottom: .55rem; font-size: .95rem; line-height: 1.55; max-width: 64ch; }
.afejl li:last-child { margin-bottom: 0; }

/* ---------- FAQ ---------- */
.afaq { margin: 2.2rem 0; }
.afaq h2 { font-size: 1.4rem; margin-bottom: .8rem; }
.afaq__post {
  border-bottom: 1px solid var(--linje);
  padding: .1rem 0;
}
.afaq__post summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 700; font-size: 1.02rem;
  padding: .8rem 2rem .8rem 0; position: relative; line-height: 1.3;
}
.afaq__post summary::-webkit-details-marker { display: none; }
.afaq__post summary::after {
  content: '+'; position: absolute; right: .3rem; top: .62rem;
  font-family: var(--mono); font-size: 1.3rem; font-weight: 400;
  color: var(--kubota); line-height: 1; transition: transform .18s;
}
.afaq__post[open] summary::after { content: '−'; }
.afaq__post summary:hover { color: var(--kubota); }
.afaq__post p {
  margin: 0 0 .95rem; font-size: .96rem; line-height: 1.6;
  color: var(--jord); max-width: 64ch;
}