/*
 * Firmamassage-bysider - de to sektioner der er GENBRUGT fra hubben.
 *
 * Reglerne herunder er trukket UAENDREDE ud af side 709's egen style-blok
 * (betalingsmodel-kortene .models2/.mcard og sted-kortene .sted/.hvor__valg).
 * Selektorerne er ikke skrevet om: templaten pakker de to sektioner i
 * <div class="fm-rod">, praecis som hubben goer, saa kortene ser ud paa
 * bysiden som de gor pa hubben - ikke "naesten som".
 *
 * REGEL: aendrer hubbens kort udseende, skal denne fil genskabes. Den er en
 * KOPI, ikke en kilde. Genskab med udtraekket i memory firmamassage-bysider.
 * Udtrukket 2026-08-29 fra _elementor_data paa post 709.
 *
 * De variabler kortene bruger, og som ikke findes i designsystemet:
 */
.zfirmaby .fm-rod{
  --afsnit:clamp(7rem,6.4rem + 2.2vw,8.875rem);
  --afsnit-halv:clamp(3.5rem,3.2rem + 1.1vw,4.4375rem);
  --foto-betaling:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-foto-betaling.png");
  --foto-arbejde:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-foto-arbejde.png");
  --foto-klinik:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-foto-klinik.png");
  --foto-hjem:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-foto-hjem.png");
  --ikon-bil:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-ikon-bil.png");
  --ikon-klinik:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-ikon-klinik.png");
  /* Kundelogoerne. Kun de ni der ogsaa staar i templatens zfby_kunder.
     Kurateret 30-08-2026 mod dashboardets firmakunder + netto-omsaetning i
     Dinero: EnergiFyn ud (een event til 2.717 kr, ingen aftale), Fjernvarme
     Fyn ind (256.614 kr i 2026 - stoerste kunde), plus ASSA ABLOY og
     Elbek & Vejrup. Soeren Jensen og landsdaek/LEJSB hoerer ikke til her. */
  --logo-metro:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-logo-metro.webp");
  --logo-egmont:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-logo-egmont.webp");
  --logo-kiloo:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-logo-kiloo.webp");
  --logo-fjernvarmefyn:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-logo-fjernvarmefyn.webp");
  --logo-assaabloy:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-logo-assaabloy.webp");
  --logo-elbekvejrup:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-logo-elbekvejrup.webp");
  --logo-indgang:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-logo-indgang.webp");
  --logo-ishoej:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-logo-ishoej.webp");
  --logo-toemrer:url("https://zency.dk/wp-content/uploads/2026/08/zency-firmamassage-logo-toemrer.webp");
}
/* Sektionernes egen lodrette luft styres af bysidens rytme, ikke hubbens
   --afsnit (7-8,9rem), som ville give dobbelt luft mellem to sektioner. */
.zfirmaby .fm-rod .models2,
.zfirmaby .fm-rod .sted-sektion{padding-top:0;padding-bottom:0;background:transparent}

/* ---------- BETALINGSMODELLER — foto-kort med grøn overlejring ---------- */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .models2{background:var(--color-cream);
  padding-top:var(--afsnit); padding-bottom:var(--afsnit-halv)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .models2 h2{margin-bottom:clamp(1.75rem,1.4rem + 1.5vw,2.5rem)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .models2__grid{--mgap:clamp(1rem,.8rem + 1vw,1.6rem); display:grid; gap:var(--mgap)}
@media(min-width:820px){
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .models2__grid{grid-template-columns:repeat(3,1fr)}
}
/* Overlejringen er nu en gradient i stedet for en flad tone: let i toppen, så
   fotoet faktisk kan ses, og tung i bunden, hvor tallene skal kunne læses. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard{
  position:relative; border-radius:12px; overflow:hidden;
  padding:clamp(1.5rem,1.2rem + 1.2vw,1.9rem);
  display:flex; flex-direction:column; color:#fff;
  background-image:
    linear-gradient(180deg, rgba(63,97,85,.58) 0%, rgba(37,66,57,.88) 42%, rgba(20,48,42,.96) 100%),
    var(--foto-betaling);
  background-size:100% 100%, cover; background-position:0 0, 50% 32%;
  box-shadow:0 1px 3px rgba(17,17,17,.08), 0 16px 38px -24px rgba(20,48,42,.55);
}
/* Mærkater: samme pille-form på begge kort i stedet for en cirkel i hjørnet. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__tag{
  align-self:flex-start; display:inline-block; margin-bottom:.9rem;
  font-family:var(--font-dosis); font-weight:700; font-size:.7rem;
  letter-spacing:.13em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:9999px;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__tag--free{
  position:absolute; top:clamp(.5rem,.4rem + .35vw,.7rem); right:clamp(.65rem,.55rem + .45vw,.9rem);
  margin:0; z-index:1;
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(178,221,195,.5);
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard h3{
  font-family:var(--font-merriweather); font-weight:400; letter-spacing:.4px;
  font-size:clamp(1.45rem,1.25rem + .8vw,1.75rem); line-height:1.25;
  color:#fff; margin-bottom:.9rem;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard > p{font-size:.96rem; line-height:1.55; color:rgba(255,255,255,.92); margin:0 0 1.35rem; max-width:none}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__list{list-style:none; margin:0 0 1.6rem; padding:0; display:grid; gap:.6rem}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__list li{position:relative; padding-left:1.7rem; font-size:.95rem; color:#fff}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__list li::before{content:"✓"; position:absolute; left:0; top:-.05em; font-weight:700; color:var(--color-mint)}
/* Fordelingen: en bjælke der viser forholdet, og tallene under.
   Den erstatter de to næsten sorte felter, som blev mudrede mod det grønne. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__ratio{margin-top:auto}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__bar{display:flex; height:.45rem; border-radius:9999px; overflow:hidden; background:rgba(255,255,255,.22); margin-bottom:.8rem}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__bar i{display:block; height:100%}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__bar .firma{background:var(--color-mint)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__split{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__split div{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16);
  border-radius:8px; padding:.6rem .5rem .7rem; text-align:center;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__split span{display:block; font-size:.72rem; color:rgba(255,255,255,.82); margin-bottom:.2rem}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .mcard__split b{
  display:block; font-family:var(--font-merriweather); font-weight:400;
  font-size:1.45rem; color:#fff; line-height:1.1; font-variant-numeric:tabular-nums;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted-sektion{background:var(--color-cream);
  padding-top:var(--afsnit-halv); padding-bottom:var(--afsnit)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted-sektion h2{margin-bottom:clamp(1.75rem,1.4rem + 1.5vw,2.5rem)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted-sektion .hvor__valg{margin-top:0}
/* De to måder at lægge massagen på. Toppen er behandlingsbilledet fra
   heroen bag et forest-slør, så kortene får billede og dybde i stedet for
   en flad tone. Ikonerne er sidens egne PNG'er med hvid baggrund:
   grayscale + invert gør stregen lys og baggrunden sort, og screen
   fjerner det sorte, så stregen står hvid på billedet. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .hvor__valg{display:grid; gap:clamp(1rem,.8rem + 1vw,1.5rem); margin-top:clamp(2.25rem,1.8rem + 2vw,3.25rem)}
@media(min-width:768px){
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .hvor__valg{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:940px){
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .hvor__valg{grid-template-columns:repeat(3,1fr)}
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted{
  position:relative; overflow:hidden; background:#fff; display:flex; flex-direction:column;
  border:2px solid var(--color-sage-400); border-radius:var(--radius-2xl);
  box-shadow:0 1px 2px rgba(17,17,17,.04), 0 20px 44px -28px rgba(20,48,42,.5);
  transition:transform .35s var(--ease-out-soft), border-color .3s, box-shadow .35s var(--ease-out-soft);
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted:hover{
  transform:translateY(-5px); border-color:var(--color-sage-600);
  box-shadow:0 1px 2px rgba(17,17,17,.05), 0 30px 56px -26px rgba(20,48,42,.55);
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__top{
  position:relative; overflow:hidden; display:grid; place-items:end start;
  aspect-ratio:2.4; padding:clamp(.8rem,.65rem + .6vw,1.15rem);
  background-size:cover;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted--arbejde .sted__top{background-image:var(--foto-arbejde); background-position:50% 12%}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted--klinik .sted__top{background-image:var(--foto-klinik); background-position:50% 46%}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted--hjem .sted__top{background-image:var(--foto-hjem); background-position:50% 8%}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__top::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,48,42,.82) 0%, rgba(20,48,42,.3) 42%, rgba(20,48,42,.26) 100%);
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__ikon{
  position:relative; z-index:1; flex:none; display:grid; place-items:center;
  width:clamp(4.25rem,3.5rem + 2.8vw,5.25rem); height:clamp(4.25rem,3.5rem + 2.8vw,5.25rem);
  border-radius:50%; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__ikon i{
  display:block; width:62%; height:52%;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  filter:grayscale(1) invert(1) brightness(1.75); mix-blend-mode:screen;
}
/* De tegnede ikoner er allerede hvide, så de skal ikke igennem
   invert/screen-behandlingen, som de hentede PNG'er kræver. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__ikon i.sted__bil,
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__ikon i.sted__hus{filter:none; mix-blend-mode:normal; height:auto; aspect-ratio:1}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__ikon i.sted__bil{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate(0%2C-0.6)%22%3E%3Cpath%20d%3D%22M2.4%2016.1V7.9a1%201%200%200%201%201-1h9.2a1%201%200%200%201%201%201v8.2%22%2F%3E%3Cpath%20d%3D%22M13.6%2010.3h3.2a1.6%201.6%200%200%201%201.27.63l2.3%203a1.6%201.6%200%200%201%20.33%201v1.17h-1.5%22%2F%3E%3Cpath%20d%3D%22M8.6%2016.1h6%22%2F%3E%3Ccircle%20cx%3D%226.3%22%20cy%3D%2216.4%22%20r%3D%221.85%22%2F%3E%3Ccircle%20cx%3D%2217.4%22%20cy%3D%2216.4%22%20r%3D%221.85%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); width:58%}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__ikon i.sted__hus{background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.4%2010.9%2012%204.2l8.6%206.7%22%2F%3E%3Cpath%20d%3D%22M5.5%209.4v10.1h13V9.4%22%2F%3E%3Cpath%20d%3D%22M9.9%2019.5v-5.3h4.2v5.3%22%2F%3E%3C%2Fsvg%3E"); width:50%}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__ikon i.sted__klinik{
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.4%2010.9%2012%204.2l8.6%206.7%22%2F%3E%3Cpath%20d%3D%22M5.5%209.4v10.1h13V9.4%22%2F%3E%3Ctext%20x%3D%2212%22%20y%3D%2215.4%22%20text-anchor%3D%22middle%22%20stroke%3D%22none%22%20fill%3D%22%23fff%22%20font-family%3D%22Georgia%2C%26quot%3BTimes%20New%20Roman%26quot%3B%2Cserif%22%20font-size%3D%222.1%22%20letter-spacing%3D%220.12%22%3EZENCY%3C%2Ftext%3E%3C%2Fsvg%3E");
  filter:none; mix-blend-mode:normal; width:50%; height:auto; aspect-ratio:1;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted{--sted-pad:clamp(1.5rem,1.25rem + 1.1vw,2.15rem); --sted-bund:clamp(1.9rem,1.5rem + 1.6vw,2.9rem)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__krop{padding:var(--sted-pad); display:flex; flex-direction:column; flex:1}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__mrk{
  font-family:var(--font-dosis); font-weight:700; text-transform:uppercase;
  letter-spacing:.09em; font-size:.73rem; color:var(--color-sage-700); margin:0 0 .45rem;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted h3{
  font-weight:300; letter-spacing:.6px; color:var(--color-forest);
  font-size:clamp(1.3rem,1.12rem + .75vw,1.55rem); line-height:1.25; margin:0 0 .65rem;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__krop > p{margin:0; font-size:.97rem; line-height:1.65; color:var(--color-ink-soft); text-wrap:pretty}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__liste{
  list-style:none; margin:auto 0 0; padding:1.05rem 0 0;
  display:grid; gap:.5rem; border-top:1px solid var(--color-line);
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__liste li{position:relative; padding-left:1.75rem; font-size:.9rem; line-height:1.5; color:var(--color-ink-soft)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__liste li::before{
  content:""; position:absolute; left:0; top:.1rem;
  width:1.25rem; height:1.25rem; border-radius:50%; background:var(--color-sage-100);
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__liste li::after{
  content:""; position:absolute; left:.4rem; top:.45rem; width:.45rem; height:.25rem;
  border-left:2px solid var(--color-sage-600); border-bottom:2px solid var(--color-sage-600);
  transform:rotate(-45deg);
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted__liste b{color:var(--color-forest); font-weight:inherit}

/* ---------- KUNDEBAAND (marquee) - KOPIERET fra hubbens trustband ----------
   Kun selve baandet foelger med. .trustband og .trustband__cap hoerer til
   hubbens fuldbredde-panel under heroen; paa bysiden staar baandet inde i
   tilbudssektionen med sin egen lille label, saa den store Merriweather-cap
   ville konkurrere med sektionens H2 lige under.
   Sporet indeholder logoerne to gange, og animationen flytter praecis 50 %
   - saa springet tilbage er usynligt og baandet koerer uendeligt. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
/* flex-wrap og max-width saettes eksplicit: uden dem klapper sporet om paa to
   raekker, fordi wrapperens reset begraenser bredden til 100 %. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .marquee-track{
  display:flex; flex-wrap:nowrap; align-items:center; gap:30px;
  width:max-content; max-width:none;
  animation:marquee 38s linear infinite;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .marquee-set{
  display:flex; flex-wrap:nowrap; align-items:center; gap:30px;
  flex:0 0 auto; max-width:none;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .marquee:hover .marquee-track,
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .marquee:focus-within .marquee-track{animation-play-state:paused}
/* Sporet er to saet plus et mellemrum bredt, saa -50 % lander et halvt
   mellemrum for kort. De resterende 15 px traekkes fra. */
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 15px))}
}
/* Maalt paa zency.dk: hvert logo fylder 220x90 px med 30 px imellem. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo-mark{
  flex:none; width:220px; height:90px;
  background-color:var(--color-forest);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  transition:background-color .3s;
}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo-mark:hover{background-color:var(--color-sage-600)}
@media(max-width:600px){.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo-mark{width:160px; height:66px}}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo--metro{-webkit-mask-image:var(--logo-metro); mask-image:var(--logo-metro)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo--egmont{-webkit-mask-image:var(--logo-egmont); mask-image:var(--logo-egmont)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo--kiloo{-webkit-mask-image:var(--logo-kiloo); mask-image:var(--logo-kiloo)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo--fjernvarmefyn{-webkit-mask-image:var(--logo-fjernvarmefyn); mask-image:var(--logo-fjernvarmefyn)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo--assaabloy{-webkit-mask-image:var(--logo-assaabloy); mask-image:var(--logo-assaabloy)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo--elbekvejrup{-webkit-mask-image:var(--logo-elbekvejrup); mask-image:var(--logo-elbekvejrup)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo--indgang{-webkit-mask-image:var(--logo-indgang); mask-image:var(--logo-indgang)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo--ishoej{-webkit-mask-image:var(--logo-ishoej); mask-image:var(--logo-ishoej)}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .logo--toemrer{-webkit-mask-image:var(--logo-toemrer); mask-image:var(--logo-toemrer)}
/* Uden bevaegelse: baandet staar stille og kan scrolles med fingeren i stedet. */
@media (prefers-reduced-motion:reduce){
  .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .marquee{overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .marquee-track{animation:none}
}

/* ---------- PRISBEREGNEREN - KOPIERET fra hubbens _elementor_data ----------
   Trukket uaendret ud 31-08-2026, praecis som sted- og betalingskortene og
   logobaandet. Reglerne er hubbens egne og bruger allerede .fm-rod x 5, saa
   selektorerne er ikke skrevet om - templaten pakker beregneren i
   <div class="fm-rod">, som hubben goer.
   REGEL: aendrer hubbens beregner udseende, skal dette afsnit genskabes.
   OLIVEN MIGRERET 31-08-2026: beregnerens CTA og valgte faneknap stod i
      #877847 (4.37:1 mod hvid tekst - falder WCAG AA). De staar nu i
      designsystemets #7a6c40 (5.19:1). Hubbens egen kopi (side 709) er
      rettet i samme arbejdsgang - hold de to ens. */
/* ---------- PRISBEREGNER — 1:1 med den live app på Cloud Run.
   Målt direkte i appen: gradient 130deg #486C5F 53% → #8CD2B9 117%,
   skive 426px i #F5F3EF, CTA #7a6c40 i Dosis 16px/1px tracking.
   NB: farverne er migreret 31-08-2026 fra #877847 (4.37:1) til
   designsystemets #7a6c40 (5.19:1); hover fra #6E6138 til #615531. ---------- */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc{
  width:100%;
  background:linear-gradient(130deg,#486C5F 53.17%,#8CD2B9 116.92%);
  color:#fff; padding-block:var(--afsnit); overflow:hidden;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__inner{width:min(1180px,100% - 2.5rem); margin-inline:auto}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__head{text-align:center; margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__head h2{
  font-family:var(--font-merriweather); font-weight:700;
  font-size:clamp(1.9rem,1.5rem + 1.6vw,2.25rem); color:#fff;
  padding-bottom:0; margin-bottom:.6rem; letter-spacing:normal;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__head h2::after{display:none}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__head p{color:rgba(255,255,255,.88); margin:0 auto; max-width:44ch; font-size:1.0588rem}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__grid{display:grid; gap:clamp(2rem,1.5rem + 2.5vw,3.5rem); align-items:center}
@media(min-width:900px){.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__grid{grid-template-columns:1fr 1fr}}

/* faneknapper */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__tabs{
  display:flex; gap:.25rem; padding:.4rem; margin-bottom:1.75rem;
  border:1px solid rgba(255,255,255,.28); border-radius:9999px;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__tab{
  flex:1; border:0; cursor:pointer; background:transparent; color:rgba(255,255,255,.72);
  font-family:var(--font-dosis); font-weight:700; font-size:14px; letter-spacing:.35px;
  text-transform:uppercase; padding:.8rem .5rem; border-radius:9999px; white-space:nowrap;
  transition:background-color .25s,color .25s;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__tab:hover{color:#fff}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__tab[aria-selected="true"]{background:#7a6c40; color:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__tab:focus-visible{outline:2px solid #fff; outline-offset:2px}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__panel{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:1.5rem; padding:clamp(1.5rem,1.1rem + 1.6vw,2rem); margin-bottom:2rem;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__panel h3{
  font-family:var(--font-merriweather); font-weight:400; color:#fff;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem); margin-bottom:1.25rem; letter-spacing:normal;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__list{list-style:none; margin:0; padding:0; display:grid; gap:.85rem}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__list li{position:relative; padding-left:2rem; font-weight:500; color:#fff; font-size:1rem}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__list li::before{
  content:"✓"; position:absolute; left:0; top:-.1em;
  color:#B7A96B; font-size:1.15rem; font-weight:700;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__slider{text-align:center; margin-bottom:1.75rem}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__slider:last-child{margin-bottom:0}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__slider label{
  display:block; font-family:var(--font-merriweather); font-weight:700; font-size:1.15rem;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; margin-bottom:.25rem;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__count{
  display:block; font-family:var(--font-source); font-weight:400; font-size:1.05rem;
  color:rgba(255,255,255,.9); margin-bottom:1rem; font-variant-numeric:tabular-nums;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__range{
  -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:9999px;
  background:rgba(255,255,255,.35); outline:none; cursor:pointer;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:#7a6c40; border:3px solid #F5F3EF; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.35);
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:#7a6c40;
  border:3px solid #F5F3EF; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.35);
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__range:focus-visible{outline:2px solid #fff; outline-offset:6px}

/* prisskiven */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__result{display:grid; justify-items:center; gap:1.75rem}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__disc{
  width:clamp(260px,30vw,426px); aspect-ratio:1; border-radius:50%;
  background:#F5F3EF; display:grid; place-content:center; text-align:center;
  padding:2rem; box-shadow:0 30px 70px -28px rgba(0,0,0,.45);
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__price{
  font-family:var(--font-merriweather); font-weight:400; color:var(--color-ink);
  font-size:clamp(2.4rem,1.8rem + 2.6vw,3.4rem); line-height:1; font-variant-numeric:tabular-nums;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__price em{font-style:normal; font-size:.42em; color:var(--color-ink-soft); margin-left:.2em}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__note{display:block; margin-top:.9rem; font-size:.85rem; color:var(--color-ink-soft); max-width:24ch; margin-inline:auto}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__cta{
  display:inline-flex; align-items:center; gap:1rem; height:56px; padding:0 .5rem 0 2rem;
  background:#7a6c40; color:#fff; border-radius:9999px; text-decoration:none;
  font-family:var(--font-dosis); font-weight:700; font-size:16px; letter-spacing:1px;
  text-transform:uppercase; transition:background-color .2s;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__cta:hover,
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__cta:focus{background:#615531; color:#fff}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__cta i{
  width:40px; height:40px; border-radius:50%; background:#fff; color:#7a6c40;
  display:grid; place-items:center; font-style:normal; font-size:1.1rem; flex:none;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__link{
  display:inline-block; color:rgba(255,255,255,.92); font-size:.92rem;
  text-decoration:underline; text-underline-offset:3px;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__link:hover{color:#fff}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc__fine{font-size:.85rem; color:rgba(255,255,255,.8); text-align:center; margin-top:2rem; max-width:64ch; margin-inline:auto}

/* ---- Noegletals-bjaelken (.fakta) - UAENDRET UDTRAEK fra side 709 -----------
 * Hubben har allerede praecis denne bjaelke under sin hero. Bysiden viser de
 * samme tre noegletal, saa markup OG CSS er kopieret 1:1 i stedet for at blive
 * bygget igen - se [[genbrug-eksisterende-moduler]]. Reglerne gentager .fm-rod
 * fem gange, fordi hubbens egne gor det; roer ikke selektorerne.
 * Aendrer hubbens bjaelke udseende, skal denne blok genskabes.
 * -------------------------------------------------------------------------- */

/* Nøgletals-bjælken ligger UNDER hele heroen i fuld bredde — et hvidt panel
   der ankrer bunden af skærmbilledet, i stedet for at klemme sig ind i venstre spalte. */
/* Fire selvstændige kort med luft imellem frem for ét panel med skillestreger. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .fakta{background:transparent; padding-block:0}

.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .fakta__bar{
  background:#fff;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:1rem clamp(40px,7vw,130px); padding:40px 20px; min-height:118px;
}

.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .fakta__punkt{
  display:inline-flex; align-items:center; gap:5px;
  font-size:16px; line-height:1.35; color:var(--color-ink-soft);
}

.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .fakta__punkt b{color:var(--color-forest); font-weight:600}

.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .fakta__punkt svg{
  width:38px; height:38px; flex:none;
  fill:var(--color-sage-600); stroke:none;
}

@media(max-width:768px){.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .fakta__bar{padding:1.5rem 1rem; min-height:0; gap:.9rem 1.5rem}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .fakta__punkt svg{width:30px; height:30px}
}

/* ---- Skrifterne inde i .fm-rod --------------------------------------------
 * Hubbens egen basisregel saetter font-family paa .fm-rod og Merriweather paa
 * h1-h3 indeni. Den blev IKKE kopieret med 29-08, fordi udtraekket filtrerede
 * paa .sted/.mcard/.models2/.hvor__valg - foelgen var at ALT i de kopierede
 * sektioner faldt tilbage til browserens systemskrift, mens hubben stod i
 * Source Sans. Det var praecis dét man saa, naar de to sider blev holdt op mod
 * hinanden. Kun font-family er hentet over; farve, vaegt og margin er allerede
 * rigtige paa bysiden og ville give utilsigtede spring hvis de fulgte med.
 * -------------------------------------------------------------------------- */

.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod{font-family:var(--font-source)}

.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod h1,
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod h2,
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod h3{font-family:var(--font-merriweather)}

/* ---- Mobil: eet noegletal pr. linje - aldrig 1+2 --------------------------
 * Hubben viser tre linjer paa 390px, men kun paa et hængende haar: de to
 * sidste punkter maaler 113+24+222 = 359px mod 358px plads. Bysiden bruger
 * Source Sans Pro (temaets) og hubben Source Sans 3 (sin egen @import), og de
 * faa pixels forskel var nok til at bysiden broed 1+2 hvor hubben broed 1+1+1.
 * Her gaettes der ikke paa skriftbredder: paa mobil staar de tre under
 * hinanden, punktum. Samme raekkeafstand som hubben (gap'ens row-vaerdi), saa
 * bjaelken bliver de samme 167px hoej. Se ogsaa reglen om at tre elementer
 * aldrig maa braekke 2+1 i firmaby.css.
 * -------------------------------------------------------------------------- */
@media(max-width:768px){
  .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .fakta__bar{flex-direction:column; align-items:center}
}


/* ==========================================================================
 * EXIT-PAAMINDELSE - trukket UAENDRET ud af side 709, som resten af filen.
 * Knap- og visually-hidden-reglerne foelger med, fordi hubbens .btn ikke
 * findes andre steder paa bysiden. Alt er scopet til .fm-rod.
 * ========================================================================== */
/* ---------- knapper (.z-btn) ---------- */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-dosis); font-weight:700; letter-spacing:.5px; text-transform:none;
  font-size:clamp(0.9412rem,0.893rem + 0.2273vw,1.0588rem); white-space:normal;
  background:var(--color-olive); color:#fff; border:1.5px solid var(--color-olive);
  border-radius:9999px; padding:.85rem 1.9rem; text-decoration:none; cursor:pointer;
  transition:background-color .2s,border-color .2s;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .btn:hover,
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .btn:focus,
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .btn:active{background:var(--color-olive-dark); border-color:var(--color-olive-dark); color:#fff}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .btn:focus-visible{outline:2px solid var(--color-olive-dark); outline-offset:3px}
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------- EXIT-PÅMINDELSE ----------
   Vises én gang pr. besøg, når musen forlader siden opad - altså når man
   er på vej mod fanens kryds. Kun på mus: en telefon har ingen "vej ud",
   og en pop-up dér ville bare være i vejen.
   Udtrykket følger zency.dk's egne pop-ups (.zbg-info-modal). */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit{
  position:fixed; inset:0; z-index:70; display:none;
  align-items:center; justify-content:center; padding:1.25rem;
  background:rgba(0,0,0,.5); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit--aaben{display:flex; animation:exit-ind .22s var(--ease-out-soft) both}
@keyframes exit-ind{from{opacity:0} to{opacity:1}}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__boks{
  position:relative; overflow:hidden; width:min(640px,100%); text-align:center;
  background:var(--color-forest); color:#fff;
  border-radius:20px; padding:2.25rem 1.75rem 1.75rem;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  animation:exit-op .28s var(--ease-out-soft) both;
}
/* Plads til Morten i hoejre side. Under 720px er der ikke plads ved siden af
   indholdet, saa han skjules og boksen falder tilbage til fuld bredde. */
@media(min-width:721px){.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__boks{padding-right:210px} }
@keyframes exit-op{from{transform:translateY(12px); opacity:0} to{transform:none; opacity:1}}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__luk{
  position:absolute; top:14px; right:14px; width:30px; height:30px;
  border:0; border-radius:50px; background:rgba(255,255,255,.14); color:#fff;
  font-size:20px; line-height:1; cursor:pointer;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__luk:hover{background:rgba(255,255,255,.26)}
/* Morten staar op ad boksens venstre kant og laener sig ind. Billedet er
   dekoration - derfor tom alt og aria-hidden; alt indhold staar i teksten.
   Under 760px er der ikke plads ved siden af boksen, saa han skjules. */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__foto{
  position:absolute; right:6px; bottom:0; display:none;
  width:196px; height:auto; pointer-events:none;
}
@media(min-width:721px){.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__foto{display:block} }.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit h2{
  color:#fff; margin:0 0 .55rem;
  font-size:clamp(1.35rem,1.15rem + .85vw,1.65rem);
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__brod{margin:0 0 1.4rem; font-size:1rem; line-height:1.6; max-width:none; color:rgba(255,255,255,.85)}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__felter{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit input{
  flex:1 1 12rem; min-width:0; padding:.85rem 1.1rem;
  border:1.5px solid transparent; border-radius:.65rem;
  background:#fff; color:var(--color-ink);
  font-family:var(--font-source); font-size:1rem;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit input:focus{outline:none; border-color:var(--color-mint); box-shadow:0 0 0 3px rgba(178,221,195,.35)}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit .btn{flex:none; padding-inline:1.6rem}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__loefte{
  display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; justify-content:center;
  margin:1.1rem 0 0; padding:0; list-style:none; font-size:.88rem; color:rgba(255,255,255,.82);
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__loefte li{display:flex; align-items:center; gap:.4rem}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__loefte i{
  width:1.05rem; height:1.05rem; flex:none; border-radius:50%;
  background:rgba(178,221,195,.2); position:relative;
}.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__loefte i::after{
  content:""; position:absolute; left:.3rem; top:.32rem; width:.36rem; height:.19rem;
  border-left:1.5px solid var(--color-mint); border-bottom:1.5px solid var(--color-mint);
  transform:rotate(-45deg);
}



/* ---------- exit__luk-rettelse (kun bysiden) --------------------------------
 * Afviger bevidst fra hubbens kopi. Paa hubben er knappen 30x30 med krydset
 * praecis i midten; her skyder bysidens egen knap-regel padding:8px 16px ind,
 * saa knappen blev 32px bred og krydset sad 5px for langt til hoejre og 2,5px
 * for langt ned. Hubbens CSS saetter aldrig padding paa .exit__luk, saa den
 * fremmede regel vandt. Flex-centrering i stedet for line-height goer den
 * uafhaengig af glyffens egne metrikker.
 * -------------------------------------------------------------------------- */
.fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .exit__luk{
  box-sizing:border-box; padding:0;
  display:flex; align-items:center; justify-content:center;
  min-width:0; font-size:18px; line-height:1;
}