/* LummeCo-standarden: headeren ligger gjennomsiktig og uskarp (frostet glass)
   over heroen, med hvit logo og hvite lenker. Naar man ruller (temaet setter
   .is-stuck etter 8 px), blir den hvit som paa resten av nettstedet.
   Bare paa denne siden: landing-statisk.php laster filen naar mappen har den,
   og body faar klassen lp-side-standard. (Endret 21.10.2026, foer svart.) */

/* ---------- Headeren ---------- */
body.lp-side-standard .site-header{
  background:rgba(18,19,23,.16);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  backdrop-filter:saturate(1.3) blur(14px);
  border-bottom-color:rgba(255,255,255,.14);
  transition:background-color .32s ease,border-color .32s ease,box-shadow .32s ease;
}
body.lp-side-standard .site-header.is-stuck{
  background:var(--white,#fff);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:var(--line,#e7e5df);
}

/* Over heroen: hvit logo (hvit LUMME, gul Co) i samme stoerrelse som den vanlige. */
body.lp-side-standard .site-header:not(.is-stuck) .logo{background:url("img/logo-hvit.png") 0 50%/contain no-repeat}
body.lp-side-standard .site-header:not(.is-stuck) .logo__img{visibility:hidden}

body.lp-side-standard .site-header:not(.is-stuck) .link-phone,
body.lp-side-standard .site-header:not(.is-stuck) .link-phone__num,
body.lp-side-standard .site-header:not(.is-stuck) .link-phone__icon{color:#fff}

/* Hvit tekst gjelder bare toppnivaaet i menyen paa PC. Paa mobil er
   menypanelet hvitt med moerk tekst som ellers. */
@media (min-width:1041px){
  body.lp-side-standard .site-header:not(.is-stuck) .main-nav>a,
  body.lp-side-standard .site-header:not(.is-stuck) .main-nav>.has-drop>.drop-toggle,
  body.lp-side-standard .site-header:not(.is-stuck) .main-nav>.has-drop>a{color:#fff}
  body.lp-side-standard .site-header:not(.is-stuck) .main-nav>a:hover,
  body.lp-side-standard .site-header:not(.is-stuck) .main-nav>.has-drop>.drop-toggle:hover{color:var(--brand,#ffd61f)}
}
@media (max-width:1040px){
  body.lp-side-standard .site-header:not(.is-stuck) .nav-toggle span{background:#fff}
  /* Med menyen aapen er headeren hvit og vanlig, ogsaa helt oeverst. */
  body.lp-side-standard.meny-aapen .site-header{background:var(--white,#fff);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line,#e7e5df)}
  body.lp-side-standard.meny-aapen .site-header .logo{background:none}
  body.lp-side-standard.meny-aapen .site-header .logo__img{visibility:visible}
  body.lp-side-standard.meny-aapen .site-header .link-phone,
  body.lp-side-standard.meny-aapen .site-header .link-phone__num,
  body.lp-side-standard.meny-aapen .site-header .link-phone__icon{color:inherit}
  body.lp-side-standard.meny-aapen .site-header .nav-toggle span{background:var(--ink,#16161d)}
}

/* ---------- Heroen ligger under headeren ----------
   Headeren er 72 px og sticky. Heroen trekkes opp under den og faar like
   mye ekstra luft oeverst, saa bildet fyller hele skjermen bak glasset. */
body.lp-side-standard .lp-ramme>.hero:first-child{margin-top:-72px;padding-top:112px}
@media (min-width:900px){
  body.lp-side-standard .lp-ramme>.hero:first-child{min-height:100vh;min-height:100svh;padding-top:128px}
}

/* ---------- Knappene til skjemaet nederst ----------
   Myk rulling, og skjemaseksjonen stopper under den sticky headeren. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body.lp-side-standard #bestill{scroll-margin-top:72px}

/* Opplæring: stort bilde og to like høye bilder ved siden av (28.10.2026) */
@media (min-width:900px){ .lp-ramme .folk__bilder{grid-template-columns:2fr 1fr 1fr} }

/* ============ MOBIL (28.10.2026) ============
   Lange kortlister blir sveipbare karuseller med neste kort synlig i kanten og
   prikker under. Ankerlenker lander under headeren, og chatknappen løftes over
   den faste bunnlinjen. */
.lp-ramme section[id]{scroll-margin-top:72px}
.lp-ramme a,.lp-ramme button,.lp-ramme summary{-webkit-tap-highlight-color:transparent}
.sveip-prikker{display:none}
@media (max-width:759px){
  .lp-ramme :is(.revs--store,.detaljer__rad,.tilstand__rad,.sjekk-tabell){
    display:flex!important;gap:14px;overflow-x:auto;overflow-y:hidden;position:relative;
    scroll-snap-type:x mandatory;scroll-padding-inline:22px;overscroll-behavior-x:contain;
    margin-inline:-22px;padding:2px 22px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:stretch}
  .lp-ramme :is(.revs--store,.detaljer__rad,.tilstand__rad,.sjekk-tabell)::-webkit-scrollbar{display:none}
  .lp-ramme :is(.revs--store,.detaljer__rad,.tilstand__rad,.sjekk-tabell)>*{flex:0 0 84%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;margin:0}
  /* Sjekklisten: hver rad blir et eget kort */
  .lp-ramme .sjekk-tabell{background:none;border:0;border-radius:0}
  .lp-ramme .sjekk-tabell>.sjekk-rad{background:#fff;border:1px solid var(--line);border-radius:var(--radius);align-content:start}
  .lp-ramme :has(> :is(.revs--store,.detaljer__rad,.tilstand__rad,.sjekk-tabell)){min-width:0}
  .sveip-prikker{display:flex;justify-content:center;align-items:center;gap:6px;margin:14px 0 4px}
  .sveip-prikker button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:4px;background:var(--line);cursor:pointer;transition:width .3s cubic-bezier(.2,.7,.2,1),background-color .3s}
  .sveip-prikker button::before{content:"";position:absolute;inset:-10px -4px}
  .sveip-prikker button[aria-current="true"]{width:24px;background:var(--brand)}
  .lp-ramme .btn{transition:transform .15s ease,background-color .2s}
  .lp-ramme .btn:active{transform:scale(.97)}
  #chatbase-bubble-button{bottom:87px!important}
  #chatbase-message-bubbles{bottom:156px!important}
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .sveip-prikker button{transition:none} }

/* Hero på mobil som på forsiden: bildet i bakgrunnen bak teksten, mørk toning
   over, i stedet for bildet under teksten (28.10.2026). */
@media (max-width:899px){
  body.lp-side-standard .lp-ramme>.hero:first-child{padding-bottom:36px}
  .lp-ramme .hero__img{position:absolute;inset:0;margin:0;aspect-ratio:auto;z-index:0}
  .lp-ramme .hero__img img{object-position:72% 50%}
  .lp-ramme .hero__img::before{inset:0;height:auto;background:linear-gradient(180deg,rgba(18,19,23,.82) 0%,rgba(18,19,23,.62) 38%,rgba(18,19,23,.78) 72%,rgba(18,19,23,.94) 100%)}
  .lp-ramme .hero__img figcaption{display:none}
  .lp-ramme .hero>.wrap{position:relative;z-index:2}
  .lp-ramme .hero__lead{color:#fff}
  .lp-ramme .bevis{background:rgba(18,19,23,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:var(--radius)}
}
@media (max-width:759px){
  /* Tilstandskortene i karusellen: bildet øverst, nummer, tittel og tekst under */
  .lp-ramme .tilstand__rad li{display:flex;flex-direction:column;align-items:center;text-align:center}
  .lp-ramme .tilstand__rad img{width:78%;margin:0 auto 14px}
}

/* Tallene i heroen som svart stripe nederst i heroen, over bretten, som på
   Diamantbehandling-siden (28.10.2026). Heroen er skjermhøy, så stripen
   ligger alltid i bunnen av første skjermbilde. */
@media (min-width:900px){
  body.lp-side-standard .lp-ramme>.hero:first-child{padding-bottom:136px}
  /* Stripen måles mot heroen, ikke tekstkolonnen */
  .lp-ramme .hero .hero__copy{position:static}
  .lp-ramme .hero .hero__copy>*:not(.bevis){position:relative;z-index:2}
  .lp-ramme .hero .bevis{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);
    margin:0;padding:20px max(32px,calc((100% - 1140px)/2 + 32px));border-radius:0;background:#16161d;-webkit-backdrop-filter:none;backdrop-filter:none}
  .lp-ramme .hero .bevis li,.lp-ramme .hero .bevis li:nth-child(even),.lp-ramme .hero .bevis li:nth-child(n/**/+3){padding:2px 24px;border-left:1px solid rgba(255,255,255,.16)}
  .lp-ramme .hero .bevis li:first-child{border-left:0;padding-left:0}
  .lp-ramme .hero .bevis span{width:auto;max-width:26ch}
}

/* «Kvalitet i hvert steg» (28.10.2026): bildet fortsetter uskarpt til venstre
   i stedet for en svart flate, og toningen er svakere, bare nok til at den
   hvite teksten kan leses. */
@media (min-width:900px){
  .lp-ramme .forarbeid__bilde::after{background:linear-gradient(90deg,rgba(18,19,23,.6) 0%,rgba(18,19,23,.56) 18%,rgba(18,19,23,.47) 32%,rgba(18,19,23,.34) 44%,rgba(18,19,23,.2) 55%,rgba(18,19,23,.09) 66%,rgba(18,19,23,.02) 76%,rgba(18,19,23,0) 84%)}
  .lp-ramme .forarbeid__tekst{text-shadow:0 1px 3px rgba(0,0,0,.35),0 2px 22px rgba(0,0,0,.45)}
  .lp-ramme .forarbeid__lead{color:#fff}
}
/* Tallstripen: hver forklaring på én linje på vanlige PC-skjermer */
@media (min-width:1300px){
  .lp-ramme .hero .bevis{grid-template-columns:repeat(4,auto);justify-content:space-between;padding-inline:max(36px,calc((100% - 1260px)/2))}
  .lp-ramme .hero .bevis span{max-width:none;white-space:nowrap;font-size:.8125rem}
  .lp-ramme .hero .bevis li,.lp-ramme .hero .bevis li:nth-child(even),.lp-ramme .hero .bevis li:nth-child(n/**/+3){padding:2px 0 2px 24px}
  .lp-ramme .hero .bevis li:first-child{padding-left:0}
}
/* Bunnskjemaet: punktlisten på én linje per punkt på PC */
@media (min-width:1200px){ .lp-ramme #bestill .checks li{white-space:nowrap;font-size:1rem} }