html { color-scheme: light; }

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: rgb(255, 255, 255);
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
}
a {
    color: black;
    text-decoration: underline;
    transition: color 0.3s;
}

a:hover {
    color: #4CA43E;
}
/* Burger-knapp (skjult på desktop) */
#navbar-toggle{
  display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer;
  border-radius:10px; color:inherit; position:relative; z-index:4000;
}
#navbar-toggle:focus-visible{ outline:3px solid var(--via3-green); outline-offset:2px; }
.navbar-toggle-icon{
  position:relative; display:block; width:24px; height:2px; background:currentColor; border-radius:2px;
}
.navbar-toggle-icon::before,.navbar-toggle-icon::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:currentColor; border-radius:2px;
}
.navbar-toggle-icon::before{ top:-7px; } .navbar-toggle-icon::after{ top:7px; }
#navbar-toggle.is-open .navbar-toggle-icon{ transform:rotate(45deg); }
#navbar-toggle.is-open .navbar-toggle-icon::before{ opacity:0; }
#navbar-toggle.is-open .navbar-toggle-icon::after{ transform:rotate(-90deg); top:0; }

/* Mobil drawer */
@media (max-width: 991px){
  #navbar-toggle{ display:grid; place-items:center; }

  #navbar-menu{
    position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px);
    background:#fff; color:#111; transform:translateX(100%); transition:transform .25s ease;
    display:flex !important; flex-direction:column; justify-content:flex-start; align-items:stretch;
    overflow-y:auto; padding:calc(env(safe-area-inset-top)+16px) 14px 24px;
    box-shadow:-12px 0 24px rgba(0,0,0,.12); z-index:3001; pointer-events:none;
  }
  #navbar-menu.active{ transform:translateX(0); pointer-events:auto; }
  #navbar-menu li{ margin:0; }
  #navbar-menu a{ display:block; padding:14px 12px; font-size:18px; border-radius:12px; }
  #navbar-menu a:hover{ background: rgba(78,163,62,.08); }
  #navbar-menu a::after{ display:none !important; }

  #menu-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity:0; transition:opacity .2s ease; z-index:3000;
  }
  #menu-backdrop.show{ opacity:1; }
  #menu-backdrop[hidden]{ display:none !important; }

  /* litt tighter navbar-padding på små skjermer */
  .navbar .navbar-content{ height:auto; padding:12px 14px; }
}

.navbar {
    position: static;               /* ikke fixed lenger */
    width: 100%;
    background-color: #fff;
    color: rgb(97, 97, 97);
    /* sterkere, men fortsatt subtil skygge */
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.1); 
    transition: background-color 0.3s;
    /* luft under navbar slik at innholdet ikke kleber inn til skyggen */
    margin-bottom: 40px;
    z-index: 1000;                  /* behold z-index for meny-overlegg */
  }
  
  /* Fjern helt .navbar.scrolled om du ikke trenger den lenger */
    
.navbar .navbar-content {
    font-size: 20px; /* Øk fontstørrelsen */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 60%;
    margin: 0 auto;
    padding: 10px 20px;
}
.navbar .logo {
    font-size: 24px;
    font-weight: bold;
}
.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.navbar ul li {
    margin-left: 20px;
    position: relative;
}
.navbar ul li a {
    font-size: 20px; /* Øk fontstørrelsen */
    text-decoration: none;
    color: inherit;
    padding: 5px 0;
    transition: color 0.3s;
}
.navbar ul li a:hover {
    color: inherit; /* Behold samme farge som uten hover */
}

.navbar ul li a::after {
    background: #4ea33e; /* Endre til ønsket farge for underline */
}

.navbar.scrolled ul li a::after {
    background: rgb(97, 97, 97); /* Behold samme gråfarge som teksten */
}

.navbar.scrolled ul li a:hover {
    color: rgb(97, 97, 97); /* Behold samme gråfarge som uten hover */
}
.navbar ul li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width 0.3s;
}
.navbar ul li a:hover::after {
    width: 100%;
}
/* Sørg for at <a> er posisjonert relativt */
.navbar ul li a {
    position: relative;
    text-decoration: none;
    color: inherit;
    padding: 5px 0;
    transition: color 0.3s;
  }
  
  /* Grunnleggende utseende på “streken” */
  .navbar ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;              /* plassert helt nederst i lenka */
    left: 0;                /* starter fra venstre */
    width: 0;               /* starter “lukket” */
    height: 2px;
    background: currentColor; /* bruker samme farge som teksten */
    transition: width 0.3s ease;
  }
  
  /* På hover vokser streken til full bredde */
  .navbar ul li a:hover::after {
    width: 100%;
  }
  
  /* Eventuelt endre hover-farge på teksten også */
  .navbar ul li a:hover {
    color: #4ca43e; /* eller en annen farge du ønsker */
  }
  .navbar .logo a {
    display: inline-block;    /* gjør det enklere å styre padding, hover-effekter, etc. */
  }
  
  .navbar .logo a img {
    border-radius: 15px;      /* flytt inline-stilen her hvis du vil */
    transition: transform 0.2s;
  }
  
  .navbar .logo a:hover img {
    transform: scale(1.05);   /* liten zoom-effekt på hover */
  }
  
  
.subtext {
    color: #2b661f; /* Juster tekst under header */
    margin-top: 20px;
    text-align: center;
    width: 100%;
}
.content {
    padding-top: 60px;
    width: 50%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.container, .box {
    max-width: 100%; /* Sett maksimal bredde til å matche .content */
    margin: 0 auto; /* Sentrer innholdet */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.sections-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Endret for å sentrere bildene */
    align-items: flex-start;
    margin-top: 20px; /* Juster for å plassere bildene over header */
}
.section {
    flex: 1 1 calc(33.333% - 20px); /* Juster for å sikre at bildene har lik størrelse og utnytter skjermens bredde */
    margin: 10px;
    min-width: 300px;
    max-width: calc(33.333% - 20px); /* Juster for å sikre at bildene har lik størrelse */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.section img {
    display: block;
    width: 100%;            /* fyll bredden av kortet */
    height: 300px;          /* tving høyden til 200px (juster etter behov) */
    object-fit: cover;      /* beskjær og fyll uten å forvrenge bildet */
    border-radius: 15px;     /* matcher gjerne hjørnene du bruker ellers */
    margin-bottom: 5px;    /* luft under bildet */

}
.section .text {
    padding: 0px; /* Juster for å redusere avstanden mellom bilder og tekst */
    text-align: left;
    margin-top: 0px; /* Juster for å redusere avstanden mellom bilder og tekst */
}
.extra-section {
    width: 100%;
    background-color: rgba(230,240,232,.34);
    padding: 20px 0;
    margin-top: 50px;
}
.extra-section2 {
    background-color: #e6f0e8; /* lys grønn */
    padding: 20px 0;
    margin-top: 50px;
  }
.extra-section .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Endret for å sentrere boksene */
    align-items: flex-start;
    width: 100%; /* Endret for å utnytte skjermens bredde */
    margin: 0 auto;
}
.extra-section2 .container2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    justify-content: center;  /* sentrerer gridet når det ikke fyller max-width */
    gap: 20px;
    max-width: 1000px;         /* juster etter total bredde du vil tillate */
    margin: 0 auto;
    padding: 0 20px;
  }
  
.extra-section .container .box {
    flex: 1 1 calc(33.333% - 20px); /* Juster for å sikre at boksene har lik størrelse og utnytter skjermens bredde */
    margin: 10px;
    min-width: 300px;
    max-width: calc(33.333% - 20px); /* Juster for å sikre at boksene har lik størrelse */
    box-sizing: border-box;
    padding: 20px;
    background-color: transparent;
}
.extra-section2 .container2 .box2 {
    text-align: left;
    line-height: 1.0;
    margin-bottom: 1.25em;
    color: #333;
    padding: 20px;
    box-sizing: border-box;
  }
  .box2 h1 {
    margin-top: 0;
    font-size: 2.5rem;
    color: #2a5f52;
  }
  .box2 h3 {
    margin-top: 0;
    font-size: 1.0 rem;
    color: #4ca43e;
  }
  .box2 a {
    color: #4ca43e;
    text-decoration: underline;
  }
  
.articles-section {
    width: 100%;
    background-color: white;
    padding: 20px 0;
}
.articles-section h2 {
    font-size: 42px;
    margin-top: 50px;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.articles-section h2::before,
.articles-section h2::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px; /* Juster lengden på linjen */
    height: 3px; /* Tykk strek */
    background-color:#4CA43E;
}
.articles-section h2::before {
    left: calc(50% - 130px); /* Juster avstanden til venstre */
}
.articles-section h2::after {
    right: calc(50% - 130px); /* Juster avstanden til høyre */
}
.articles-section .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Endret for å sentrere boksene */
    align-items: flex-start;
    width: 100%; /* Endret for å utnytte skjermens bredde */
    margin: 0 auto;
}
.articles-section .box {
    margin: 10px;
    min-width: 400px;
    max-width: calc(33.333% - 20px); /* Juster for å sikre at boksene har lik størrelse */
    box-sizing: border-box;
    padding: 20px;
    background-color: #ffffff;          /* fallback (uten alpha) */
    background-color: rgba(255,255,255,0.842); /* med alpha */
    border-radius: 15px; /* Runde hjørner */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.articles-section .box img {
    width: 100%; /* Endret for å harmonere størrelsen på bildene i section container */
    max-width: 100%; /* Endret for å harmonere størrelsen på bildene i section container */
    height: auto;
}
.articles-section .read-more {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.articles-section .read-more button {
    background-color: #4CA43E;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.articles-section .read-more button:hover {
    background-color: #3a7d2e;
}
#ansatte {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 5px;
}

#ansatte h2 {
    margin-bottom: 20px;
    font-size: 28px;
}

.ansatte-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Fire ansatte i bredden */
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.ansatt {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.ansatt img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover; /* Bevarer proporsjoner og fyller boksen */
    aspect-ratio: 4 / 5; /* Valgfri: tvinger proporsjonene på en pen måte */
}

/* Denne linje‐høyden bør matche det du har for h3 */
.ansatt h3 {
    line-height: 1.2em;
    /* Om du vil tillate maks to linjer med navn: */
    min-height: calc(1.2em * 3); /* 3 linjer */
    /* Eller, om alle navn kun er én linje, bruk én linje: */
    /* min-height: 1.2em; */
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 18px;
    overflow: hidden;    /* sørger for at lange navn ikke flyter over */
  }
  

.ansatt p {
    margin: 5px 0;
    font-size: 14px;
    color: #333;
}

.ansatt a {
    color: #4ca43e;
    text-decoration: none;
    font-weight: bold;
}

.ansatt a:hover {
    text-decoration: underline;
}

/* Responsiv design for mobil */
@media (max-width: 1024px) {
    .ansatte-container {
        grid-template-columns: repeat(2, 1fr); /* To ansatte i bredden på mindre skjermer */
    }
}

@media (max-width: 600px) {
    .ansatte-container {
        grid-template-columns: repeat(1, 1fr); /* En ansatt i bredden på mobil */
    }
}
.wrapper {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  
/* 1) Gi seksjonen full-bredde, grønn bakgrunn */
.two-col-hero {
    width: 100%;
    background-color: #e6f0e8;  /* lys grønn som før */
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  
  /* 3) Grid med to kolonner */
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    position: relative;
  }
  .hero-grid.reverse > .hero-text {
    order: 2;    /* flytt tekst til etter bildet */
  }
  
  /* 4) Tekst-område med lys grønn bakgrunn */
  .hero-text {
    background-color: transparent; /* lys grønn */
    padding: 60px 40px;
    z-index: 1;
  }
  
  .hero-text h1 {
    margin-top: 0;
    font-size: 2.5rem;
    color: #2a5f52;
  }
  .hero-text h3 {
    margin-top: 0;
    font-size: 1.0 rem;
    color: #4ca43e;
  }
  
  .hero-text p {
    line-height: 1.6;
    margin-bottom: 1.25em;
    color: #333;
  }
  
  .hero-text a {
    color: #4ca43e;
    text-decoration: underline;
  }
  
  /* 5) Bilde-område som stikker ut */
  .hero-media {
    position: relative;
    overflow: visible;
    /* forskyver bildet 10% over til venstre */
    margin-left: -5%;
    z-index: 2;
  }
  
  .hero-media img {
    display: block;
    width: 105%;           /* fyller 120% av cella */
    height: auto;
    border-radius: 16px;   /* runde kanter */
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
  }
  .hero-grid.reverse > .hero-media {
    order: 1;    /* flytt bildet foran */
  }
  
  /* 6) Responsivt: én kolonne under 768px */
  @media (max-width: 768px) {
    .hero-grid {
      grid-template-columns: 1fr;
    }
    .hero-media {
      margin-left: 0;
    }
    .hero-media img {
      width: 100%;
    }
    .hero-text {
      padding: 40px 20px;
      text-align: center;
    }
  }
  /* Kun for sider uten bilder */
.hero-grid.text-only {
    align-items: start;
  }
  .colored-list {
    list-style-type: disc;
    padding-left: 1.5em;
  }
  .colored-list li::marker {
    color: #4ca43e;       /* grønn som dine knapper */
    font-size: 1.2em;     /* litt større */
  }
  .colored-list li {
    margin-bottom: 0.5em;
  }
 /* Spesifikk styling for årsrapport-bildet */
.hero-media .report-img {
    width: 200px;        /* tvinger bredde på akkurat dette bildet */
    height: 150px;       /* tvinger høyde */
    object-fit: cover;   /* beskjærer om nødvendig, beholder proporsjoner */
    border-radius: 8px;  /* om du vil ha runde hjørner her også */
  }
  .mosaic-gallery {
    padding-top: 80px;   /* øk fra 0 til f.eks. 80px */
  }
  .mosaic-gallery h2 {
    text-align: center;
    margin-bottom: 24px;
    font-size: 2rem;
    color: #2a5f52;
  }
  
  .mosaic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: 150px;
    gap: 16px;
    grid-auto-flow: dense;
  }
  
  /* Tile-varianter */
  .tile--small { grid-row: span 1; grid-column: span 1; }
  .tile--medium { grid-row: span 2; grid-column: span 1; }
  .tile--large { grid-row: span 2; grid-column: span 2; }
  
  .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s;
  }
  .tile img:hover {
    transform: scale(1.55);
  }
  
  /* Mobil: stabel alle i én kolonne */
  @media (max-width: 600px) {
    .mosaic-grid {
      grid-template-columns: 1fr;
      grid-auto-rows: auto;
    }
    .tile--medium,
    .tile--large {
      grid-column: span 1 !important;
      grid-row: span 1 !important;
    }
  }
  .dept-listing h2 {    /* oppsett på avdelingsoversikt */
    text-align: center;
    color: var(--brand-dark);
    margin-bottom: 1.5rem;
  }
  
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
    gap: 24px;
  }
  
  .dept-card {
    text-decoration: none;
    color: #2a5f52;         /* mørk grønn som standard link‐farge */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    background: #e6f0e8;
    display: flex;
    flex-direction: column;
  }
  .dept-card h3 {
    color: inherit; /* nå vil h3 arve lenkefargen */
    background-color: #e6f0e8;
    display: inline-block;           /* gjør at padding bare dekker teksten */
    background-color: #e6f0e8;       /* lysegrønn bakgrunn */
    color: #2a5f52;                  /* mørk grønn tekst */
    padding: 4px 8px;
    border-radius: 4px;
    margin: 1rem auto 0;             /* juster avstand over/under */
  }
  
  .dept-card:hover {
    transform: translateY(-4px);
  }
  
  .card-img {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
  }
  
  .card-img img {
    width: 100%; height:100%;
    object-fit: cover;
  }
  
  .dept-card h3 {
    color: var(--brand-dark);
    font-size: 1.25rem;
    margin: 1rem;
    text-align: center;
  }
 
  /* ========================
       SLIDESHOW‐STILER
       ======================== */
.slideshow-container {
  width: 80%;
  max-width: 1000px;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
}

.slide {
  display: none;
  justify-content: center;
  align-items: center;
  height: 300px;
  text-align: center;
  font-size: 1.8rem;
  padding: 20px;
  box-sizing: border-box;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.colored-slide h2 {
  margin: 0;
  font-weight: bold;
  max-width: 90%;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  width: 32px;
  height: 32px;
  font-size: 20px;
  text-align: center;
  line-height: 32px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.3s ease;
  user-select: none;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.prev { left: 12px; }
.next { right: 12px; }

    /* ========================
       Hero banner
       ======================== */

.hero-banner {
  position: relative;
  background-image: url('bibliotek/Produksjon/IMG_20250401_105956.jpg'); /* <-- Bytt til aktuell bildebane */
  background-size: cover;
  background-position: center;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 40px;
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.hero-overlay {
  background-color: rgba(0, 0, 0, 0.4); /* mørkt filter over bildet */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* juster til venstre */
}

.hero-content {
  padding: 40px 60px;
  max-width: 600px;
}

.hero-content.left-aligned {
  text-align: right;
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.hero-content .btn {
  background-color: #4ca43e;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s;
}

.hero-content .btn:hover {
  background-color: #3b7f31;
}

/* Responsiv */
@media (max-width: 768px) {
  .hero-banner {
    height: auto;
  }

  .hero-content {
    padding: 30px 20px;
    text-align: center;
  }

  .hero-content.left-aligned {
    text-align: center;
  }

  .hero-content h1 {
    font-size: 1.6rem;
  }

  .hero-content p {
    font-size: 1rem;
  }
}

/* Responsiv */
@media (max-width: 768px) {
  .hero-banner {
    height: 300px;
  }

  .hero-content h1 {
    font-size: 1.6rem;
  }

  .hero-content p {
    font-size: 1rem;
  }
}


    /* ========================
       Kampanje blokker
       ======================== */
.campaign-highlights {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 60px auto;
  width: 90%;
  max-width: 1200px;
}

.campaign-card {
  background: #f0f9f4;
  border: 2px solid #4ca43e;
  padding: 24px;
  border-radius: 12px;
  max-width: 300px;
  flex: 1 1 250px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.2s ease;
}

.campaign-card h3 {
  color: #2a5f52;
  margin-bottom: 12px;
  font-size: 1.2rem;
}

.campaign-card p {
  color: #333;
  font-size: 1rem;
  margin-bottom: 16px;
}

.campaign-card .btn {
  background-color: #4ca43e;
  color: #fff;
  padding: 10px 20px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: inline-block;
}

.campaign-card .btn:hover {
  background-color: #3b7f31;
}

.campaign-card:hover {
  transform: translateY(-4px);
}

/* Mobilvennlig justering */
@media (max-width: 768px) {
  .campaign-highlights {
    flex-direction: column;
    align-items: center;
  }
}


    /* ========================
       PRODUKTGRID‐STILER
       ======================== */
    .product-section {
      width: 80%;
      margin: 40px auto;
    }
    .product-section h2 {
      text-align: center;
      font-size: 2rem;
      color: #2a5f52; /* mørk grønn */
      margin-bottom: 24px;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
    }

    .product-card {
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 16px;
      transition: transform 0.2s;
    }
    .product-card:hover {
      transform: translateY(-4px);
    }

    .product-card img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: 4px;
      margin-bottom: 12px;
    }

    .product-card h3 {
      font-size: 1.25rem;
      color: #2a5f52;
      margin-bottom: 12px;
    }

    .product-card .quantity {
      width: 60px;
      padding: 6px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 4px;
      text-align: center;
      margin-bottom: 12px;
    }

    .product-card .order-btn {
      display: inline-block;
      background-color: #4ca43e; /* via3 grønn */
      color: #fff;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      font-size: 1rem;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .product-card .order-btn:hover {
      background-color: #3b7f31; /* litt mørkere grønn */
    }

    /* ========================
       RESPONSIVT
       ======================== */
    @media (max-width: 1024px) {
      .product-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .slideshow-container {
        height: 250px;
      }
    }

    @media (max-width: 600px) {
      .product-grid {
        grid-template-columns: 1fr;
      }
      .slideshow-container {
        height: 180px;
      }
    }
    
@media (max-width: 768px) {
  .slide {
    font-size: 1.2rem;
    height: 200px;
    padding: 10px;
  }

  .slide img {
    height: 200px;
  }

  .prev, .next {
    font-size: 18px;
    width: 28px;
    height: 28px;
    line-height: 28px;
  }
}

    /* =====================
   PRODUKT‐HEADER
   Bilde og tekst ved siden av hverandre
   ===================== */
.product-header {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.product-header img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.product-info {
  flex: 1;
}
.product-info h1 {
  margin-top: 0;
  font-size: 2rem;
  color: #2a5f52; /* mørk grønn */
}
.product-info p {
  line-height: 1.6;
  margin: 16px 0;
  color: #333;
}

/* =====================
   BESTILLINGSSKJEMA
   ===================== */

   .wrapper_produkt {
 width: 80%;
  max-width: 800px;
  margin: 40px auto;
  padding: 40px 20px;          /* Økt fra 0 20px til 40px 20px */
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Hoved‐overskrift i skjema */
.order-form h2 {
  font-size: 1.75rem;
  color: #2a5f52;
  margin-bottom: 24px;
  text-align: center;
}

/* Grid‐layout for skjemaets input‐felt */
.order-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

/* Kolonne‐bredder */
.order-form .form-group {
  display: flex;
  flex-direction: column;
}
.order-form .full-width  { grid-column: span 2; }
.order-form .half-width  { grid-column: span 1; }
.order-form .small-width { grid-column: span 1; max-width: 120px; }

/* Label‐styling */
.order-form label {
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}
.order-form label .required {
  color: #d32f2f; /* rød stjerne for obligatoriske felt */
  margin-left: 2px;
}

/* Input‐ og textarea‐felt */
.order-form input[type="text"],
.order-form input[type="email"],
.order-form input[type="tel"],
.order-form input[type="number"],
.order-form textarea {
  width: 100%;
  max-width: 100%;    /* forsikrer at ingen input går over sin kolonne‐bredde */
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.order-form .small-width input[type="number"] {
  max-width: 120px;
}
.order-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Fokus‐effekt (via3 grønn farge) */
.order-form input:focus,
.order-form textarea:focus {
  outline: none;
  border-color: #4ca43e;
  box-shadow: 0 0 0 2px rgba(76, 164, 62, 0.2);
}

/* Send‐knappen */
.order-form .submit-btn {
  background-color: #4ca43e; /* via3 grønn */
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  margin-top: 20px;
}
.order-form .submit-btn:hover {
  background-color: #3b7f31;
  transform: translateY(-2px);
}
.order-form .submit-btn:active {
  transform: translateY(0);
}

/* ================
   RESPONSIVT
   Små skjermer: én kolonne i skjema‐grid
   ================ */
@media (max-width: 600px) {
  .order-form .form-grid {
    grid-template-columns: 1fr;
  }
  .order-form .small-width {
    max-width: none;
  }
  .product-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .product-header img {
    max-width: 100%;
  }
 }
   
.footer-section {
    background-color: #484848;
    padding: 40px 20px;
    color: #fff;
  }
  
  .footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    max-width: 1000px;           /* juster etter ønsket totalbredde */
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .footer-box {
    text-align: left;
    box-sizing: border-box;
  }
  
  .footer-box img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
  }  
  
  .footer-box a {
    color: #a7d3ff;
    text-decoration: none;
  }
  
  .footer-box a:hover {
    text-decoration: underline;
  }
  
  /* Sosiale medier og © */
  .footer-social {
    text-align: center;
    margin-top: 30px;
  }
  
  .footer-social a {
    color: #fff;
    font-size: 24px;
    margin: 0 10px;
    transition: color 0.3s;
  }
  
  .footer-social a:hover {
    color: #4CA43E;
  }
  
  .footer-bottom {
    font-size: 14px;
    color: #aaa;
    text-align: center;
    margin-top: 10px;
  }
  
  /* Mobilvennlig */
  @media (max-width: 768px) {
    .footer-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  
    .footer-box {
      width: 100%;
      text-align: center;
    }
  
    .footer-box img {
      margin-bottom: 20px;
    }
  }
  
  
@media (max-width: 768px) {
    .navbar-toggle {
        display: block;
        margin-right: 20px; /* Legg til margin for å flytte ikonet lengre til venstre */
    }

    .navbar ul {
        display: none; /* Skjul den opprinnelige menyen på små skjermer */
    }

    .navbar-menu {
        display: none; /* Skjul menyen som standard på små skjermer */
        flex-direction: column;
        width: 100%;
        background-color: #333;
        position: absolute;
        top: 60px;
        right: 0; /* Åpne menyen på høyre side */
        z-index: 1000;
    }

    .navbar-menu.active {
        display: flex; /* Vis menyen når klassen 'active' er lagt til */
    }

    .navbar-menu li {
        width: 100%;
        text-align: center;
    }

    .navbar-menu li a {
        padding: 15px;
        color: #ffffff;
    }

    .navbar .navbar-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navbar .logo {
        flex: 1;
    }

    .navbar-toggle {
        order: 2; /* Sørg for at hamburgerikonet alltid er på høyre side */
    }

    .navbar-menu {
        flex: 2;
        justify-content: flex-end;
    }
}
@media (max-width: 768px) {
    .navbar ul.navbar-menu {
        display: none;
    }
    .sections-container {
        flex-direction: column;
        align-items: center;
    }
    .section img {
        position: static;
        margin-top: 20px;
    }
    .section .text {
        margin-top: 20px;
    }
    .extra-section .container {
        flex-direction: column;
        align-items: center;
    }
    .articles-section .container,
    .footer-section .container {
        grid-template-columns: 1fr;
    }
    .navbar ul.navbar-menu.active {
        display: flex;
    }
}
    @media (min-width: 1200px) {
    .sections-container {
        flex-wrap: nowrap; /* Endret for å vise bildene ved siden av hverandre */
    }
    .section {
        flex: 1 1 calc(33.333% - 20px); /* Juster for å sikre at bildene har lik størrelse og utnytter skjermens bredde */
        margin: 10px;
        min-width: 300px;
        max-width: calc(33.333% - 20px); /* Juster for å sikre at bildene har lik størrelse */
    }
}
a.btn {
    color: #fff; background-color: #4ca43e; 
    text-decoration: none;
    font-weight: 700;
  }
  
.btn {
    display: inline-block;           /* slik at padding funker som forventet */
    padding: 10px 20px;
    background-color: #4ca43e;       /* grønn bakgrunn */
    color: #fff;                     /* hvit tekst */
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
  }
  
  .btn:hover {
    background-color: #3b7f31;       /* litt mørkere ved hover */
  }
  /* ====== KORT-SEKSJON: match forsiden (trygge overstyringer) ====== */

/* Gjør bare .content bred når den inneholder kort-grid */
.content:has(> .sections-container){
  width: min(1200px, 92vw);
  margin-inline: auto;
}

/* Grid-oppsett som på forsiden */
.content .sections-container{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.5vw, 24px);
  margin-top: 0;
}

/* 2 og 3 kolonner på større skjermer */
@media (min-width: 640px){
  .content .sections-container{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
  .content .sections-container{ grid-template-columns: repeat(3, 1fr); }
}

/* Selve kortet – identisk stil med forsiden */
.content .sections-container .section{
  /* nullstill gamle flex-baserte dimensjoner */
  margin: 0;
  min-width: auto;
  max-width: none;
  flex: none;

  display: flex;
  flex-direction: column;
  background: #fff;
  color: inherit;
  text-decoration: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.1); 
  transition: transform .18s ease, box-shadow .18s ease;
}
.content .sections-container .section:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* Bilde på toppen – samme proporsjon */
.content .sections-container .section img{
  width: 100%;
  height: auto;              /* overstyrer fast høyde i eksisterende css */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0;          /* avrunding håndteres av kortet (overflow:hidden) */
  margin: 0;                 /* fjern ekstra luft under bildet */
}

/* Tekstblokk – padding/typografi som forsiden */
.content .sections-container .section .text{
  padding: clamp(14px, 2.4vw, 20px);
}
.content .sections-container .section .text h2{
  margin: 0 0 6px;
  font-size: clamp(18px, 2.6vw, 22px);
}
.content .sections-container .section .text p{
  margin: 0;
  font-size: clamp(14px, 2.2vw, 16px);
  line-height: 1.45;
  color: #333;
}
/* === Harmoniser bredde med forsiden (ikke-destruktivt) === */

/* 1) Tokens for max-bredde + side-gutter (brukes av begge seksjoner) */
:root{
  --site-max: 1200px;
  --site-gutter: clamp(16px, 4vw, 24px);
}

/* 2) Gi .content og .two-col-hero .wrapper samme container-bredde som index */
.content,
.two-col-hero .wrapper{
  width: min(var(--site-max), 92vw);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  box-sizing: border-box;
}

/* 3) Sørg for at kort-gridet bruker samme grid som index */
.content .sections-container{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 2.5vw, 24px);
  margin-top: 0;
}
@media (min-width: 640px){
  .content .sections-container{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
  .content .sections-container{ grid-template-columns: repeat(3, 1fr); }
}

/* Fjern container-skygge i kort-seksjoner slik at “kanten” forsvinner */
.content .sections-container,
.articles-section .container,
.extra-section .container,
.extra-section2 .container2 {
  box-shadow: none !important;
  background: transparent;  /* for sikkerhets skyld */
}
/* =========================
   Strammere skygge på alle kort
   ========================= */

/* Kort i alle seksjoner */
.sections-container .section,
.articles-section .box,
.extra-section .box,
.extra-section2 .container2 .box2 {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);  /* stram standard-skygge */
  transition: box-shadow 0.25s ease;
}

/* Hover-effekt: litt tydeligere skygge */
.sections-container .section:hover,
.articles-section .box:hover,
.extra-section .box:hover,
.extra-section2 .container2 .box2:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);  /* dypere skygge ved hover */
  transform: none; /* Ingen “løfting” */
}
/* Kontakt-seksjon: fjern hvit bakgrunn på boksene */
.extra-section2 {
  background: #e7f0e8; /* grønn bakgrunn over hele feltet */
  padding: 40px 0;
}

.extra-section2 .container2 .box2 {
  background: transparent !important; /* fjerner hvit bakgrunn */
  box-shadow: none !important;        /* fjerner kortskygge */
  border-radius: 0 !important;        /* fjerner avrunding hvis ønskelig */
  padding: 20px;                      /* behold luft inni */
}

/* Sørg for at teksten vises riktig på grønt felt */
.extra-section2 .container2 .box2 h3,
.extra-section2 .container2 .box2 p,
.extra-section2 .container2 .box2 a {
  color: #1e401e; /* mørkegrønn tekst, valgfritt */
}
/* =============================
   Felles hamburger/drawer-stil
   ============================= */
:root {
  --via3-green: #4EA33E;
  --muted: #616161;
}

/* Knappe-ikonet */
#navbar-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  color: inherit;
  position: relative;
  z-index: 4000;
  background: color-mix(in srgb, currentColor 10%, transparent);
  backdrop-filter: blur(4px);
}
#navbar-toggle:focus-visible { outline: 3px solid var(--via3-green); outline-offset: 2px; }
.navbar:not(.scrolled) #navbar-toggle { border: 1px solid rgba(255,255,255,.35); }
.navbar.scrolled        #navbar-toggle { border: 1px solid rgba(0,0,0,.12); }

.navbar-toggle-icon { position: relative; display: block; width: 24px; height: 2px; background: currentColor; border-radius: 2px; }
.navbar-toggle-icon::before, .navbar-toggle-icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px;
}
.navbar-toggle-icon::before { top: -7px; } 
.navbar-toggle-icon::after  { top:  7px; }
#navbar-toggle.is-open .navbar-toggle-icon { transform: rotate(45deg); }
#navbar-toggle.is-open .navbar-toggle-icon::before { opacity: 0; }
#navbar-toggle.is-open .navbar-toggle-icon::after  { transform: rotate(-90deg); top: 0; }

/* Drawer + backdrop – MOBIL */
@media (max-width: 991px) {
  #navbar-toggle { display: grid; place-items: center; }
  .navbar-menu { display: none !important; } /* Skjul desktop-meny på mobil */

  #navbar-menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw,360px);
    background: #fff; color: #111; transform: translateX(100%); transition: transform .25s ease;
    display: flex !important; flex-direction: column; justify-content: flex-start; align-items: stretch;
    overflow-y: auto; padding: calc(env(safe-area-inset-top)+16px) 14px 24px;
    box-shadow: -12px 0 24px rgba(0,0,0,.12); z-index: 3001; pointer-events: none;
  }
  #navbar-menu.active { transform: translateX(0); pointer-events: auto; }
  #navbar-menu li { margin: 0; }
  #navbar-menu a { display: block; padding: 14px 12px; font-size: 18px; border-radius: 12px; }
  #navbar-menu a:hover { background: rgba(78,163,62,.08); }
  #navbar-menu a::after { display: none !important; }

  #menu-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .2s ease; z-index: 3000;
  }
  #menu-backdrop.show { opacity: 1; }
  #menu-backdrop[hidden] { display: none !important; }

  .navbar .navbar-content { height: auto; padding: 12px 14px; }
}

/* Farger for knappen før/etter scroll */
.navbar:not(.scrolled) #navbar-toggle { color: #fff; }
.navbar.scrolled        #navbar-toggle { color: var(--muted); }
/* Undersider (uten hero): sørg for lesbar navbar fra start */
.navbar.scrolled {
  background:#fff;
  color:#616161;
  box-shadow:0 2px 2px -2px rgba(0,0,0,.2);
}
/* Sikkerhet for knappen */
.navbar.scrolled #navbar-toggle {
  color:#616161;
  border:1px solid rgba(0,0,0,.12);
}
/* === Gjør hamburgeren tydelig på undersider (hvit navbar) === */

/* Standard for mobil: mørkt ikon på lys bakgrunn */
@media (max-width: 991px){
  .navbar #navbar-toggle{
    color: #2b2b2b;                          /* selve ikonfargen (currentColor) */
    border: 1px solid rgba(0,0,0,.16);
    background: rgba(0,0,0,.05);             /* fallback – ikke stol på color-mix() */
    box-shadow: 0 1px 2px rgba(0,0,0,.08) inset;
  }
  .navbar #navbar-toggle .navbar-toggle-icon{
    color: inherit;                           /* sikre at linjene arver riktig farge */
  }
}

/* Når navbar er scrollet (undersider starter slik), bruk samme mørke farge */
.navbar.scrolled #navbar-toggle{
  color: #2b2b2b !important;
  border-color: rgba(0,0,0,.16) !important;
  background: rgba(0,0,0,.05) !important;
}

/* Kun forsiden før scroll: hvitt ikon over hero-bilde */
.navbar:not(.scrolled) #navbar-toggle{
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.14) !important;
}
/* ===============================
   VIA3 — KANONISK FOOTER
   (gjelder alle sider)
   =============================== */

.footer-section{
  background:#484848;
  color:#fff;
  padding:48px 20px;
}

.footer-container{
  /* Samme layout på alle sider */
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:32px;
  max-width:1100px;
  margin:0 auto;
  align-items:start;
  box-sizing:border-box;
}

/* Innhold */
.footer-box{ text-align:left; }
.footer-box h3{ margin:8px 0 12px; font-weight:700; }
.footer-box p{ margin:0 0 8px; }
.footer-box a{ color:#a7d3ff; text-decoration:none; }
.footer-box a:hover{ text-decoration:underline; }

/* Logoer – identisk høyde overalt */
.footer-box img{
  height:84px;           /* fast høyde gir likt uttrykk */
  width:auto;
  object-fit:contain;
  display:block;
  border-radius:10px;
  margin:0 0 22px 0;     /* jevn luft under logoene */
}

/* Sosiale medier / © */
.footer-social{ text-align:center; margin-top:28px; }
.footer-social a{ color:#fff; font-size:24px; margin:0 10px; transition:color .2s; }
.footer-social a:hover{ color:#4CA43E; }
.footer-bottom{ text-align:center; color:#aaa; font-size:14px; margin-top:10px; }

/* RESPONSIVT */
@media (max-width: 980px){
  .footer-container{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 640px){
  .footer-container{ grid-template-columns: 1fr; gap:26px; }
  .footer-box{ text-align:center; }
}

/* Rydd opp gamle regler som kranglet (grid vs flex) */
@media (max-width: 768px){
  .footer-container{ /* behold GRID – ikke flex på mobil */ display:grid; }
}
/* Avdelinger: bruk samme container-bredde som kortene over */
.dept-listing,
.dept-listing .card-grid{
  width: min(var(--site-max), 92vw);      /* samme tokens som ellers */
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  box-sizing: border-box;
}

/* På mobil: tving én kolonne = full bredde */
@media (max-width: 640px){
  .dept-listing .card-grid{ grid-template-columns: 1fr !important; }
}

/* Sikkerhet: kortene skal kunne strekke seg 100% i kolonnen */
.dept-listing .dept-card{ width: 100%; min-width: 0; }

/* === Avdelinger: sentrer griden og bruk kun én containerbredde === */

/* Bredde/padding kun på ytterste seksjon */
.dept-listing{
  width: min(var(--site-max), 92vw);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
  box-sizing: border-box;
}

/* Nullstill “egen bredde” på den indre griden, og sentrer sporene */
.dept-listing .card-grid{
  width: 100%;
  margin: 0;
  padding: 0;
  justify-content: center;   /* sentrer kolonnene når det er luft igjen */
  justify-items: stretch;
}

/* Unngå uventet ekstra margin på hvert kort */
.dept-listing .dept-card{ margin: 0; }

/* Mobil: én kolonne = full bredde */
@media (max-width: 640px){
  .dept-listing .card-grid{ grid-template-columns: 1fr !important; }
}
/* === Avdelinger: lik bredde som andre brede seksjoner + 4 i bredden === */

/* 1) Samme containerbredde som øvrige seksjoner.
   - Bruker --site-max hvis du allerede har den; ellers faller den tilbake til 1280px. */
:root{
  --site-max-wide: 1280px; /* juster hvis du ønsker en annen maks-bredde */
}

.dept-listing{
  width: min(var(--site-max-wide, var(--site-max, 1280px)), 96vw);
  margin-inline: auto;
  padding-inline: var(--site-gutter, clamp(12px, 3vw, 24px));
  box-sizing: border-box;
}

/* 2) Grid: 4 kolonner på store skjermer, ellers 3/2/1 */
.dept-listing .card-grid{
  display: grid;
  gap: clamp(16px, 2.4vw, 28px);
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 i bredden */
  justify-content: center; /* hold griden pent sentrert */
}

/* nedskaleringer */
@media (max-width: 1200px){
  .dept-listing .card-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px){
  .dept-listing .card-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .dept-listing .card-grid{ grid-template-columns: 1fr; }
}

/* Sikkerhet: kort skal strekke seg 100% i kolonnen */
.dept-listing .dept-card{ width:100%; min-width:0; margin:0; }
/* ===== Avdelingssider – mobiltilpasning ===== */
@media (max-width: 640px){

  /* 1) Venstrejuster all tekst i helten */
  .two-col-hero .hero-text,
  .two-col-hero .hero-text *{
    text-align: left !important;
  }

  /* ryddige bullets på mobil */
  .two-col-hero .hero-text ul{
    padding-left: 1.2rem;
    margin-left: 0;
    list-style-position: outside;
  }
  .two-col-hero .hero-text li{
    margin: 0.35rem 0;
  }

  /* 2) Legg bildet pent over teksten på mobil (reorder) */
  .two-col-hero .hero-grid{
    display: grid;               /* sikkerhetsnett */
    grid-template-columns: 1fr;  /* én kolonne */
    gap: 16px;                   /* litt luft mellom bilde og tekst */
  }
  .two-col-hero .hero-media{ order: -1; } /* bildet først på små skjermer */

  /* 3) Gjør bildet pent i full bredde */
  .two-col-hero .hero-media img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;         /* samme radius som ellers */
  }
}
/* Mobil: litt luft over bildet i den grønne helten */
@media (max-width: 640px){
  /* tryggest å legge padding på wrapper for å unngå margin-collaps */
  .two-col-hero .wrapper{
    padding-top: clamp(10px, 3vw, 18px);
  }

  /* hvis du ønsker bittelitt ekstra, kan du også gi media en liten margin */
  .two-col-hero .hero-media{
    margin-top: 4px; /* valgfritt – fjern om du ikke vil ha dette */
  }
}
/* Avdelings-hero på mobil: behold rekkefølge og layout, fjern "kort"-look */
@media (max-width: 640px){
  /* Kun fjerne plate/skygge rundt innholdet */
  .two-col-hero .wrapper{
    background: transparent;   /* ingen ekstra grønn plate */
    border-radius: 0;          /* ikke runde hjørner på wrapper */
    box-shadow: none;          /* fjern skygge */
    padding-top: 10px;         /* evt. litt luft over bildet (juster/sett 0) */
  }

  /* Behold mobil-layouten */
  .two-col-hero .hero-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .two-col-hero .hero-media{ order: -1; }   /* bildet først */
  .two-col-hero .hero-text,
  .two-col-hero .hero-text *{ text-align: left !important; }

  /* Hvis du også vil fjerne skyggen på selve bildet på mobil: */
  .two-col-hero .hero-media img{
    width: 100%;
    height: auto !important;
    display: block;
    border-radius: 14px;
    box-shadow: none;          /* fjern bildefeltets skygge på mobil */
  }
}
@media (max-width: 640px){
  .two-col-hero .hero-media img{ box-shadow: none; }
}

/* ---------- Footer: grunnoppsett (desktop / nettbrett) ---------- */
.footer-section{
  /* behold din bakgrunn/farger her om du har dem fra før */
  padding: clamp(28px, 5vw, 48px) 0;
}
.footer-container{
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 24px);
  align-items: start;
}
.footer-box{
  text-align: center;              /* sentrert på store skjermer */
}
.footer-box img{
  display: block;
  margin: 0 auto 12px;             /* logo sentreres kun på store skjermer */
  width: clamp(120px, 20vw, 160px); /* samme opplevde størrelse */
  height: auto;
}
.footer-box h3{ margin: 6px 0 8px; }

/* sosiale ikoner/linje nederst – valgfritt finpuss */
.footer-social{ text-align: center; margin-top: 12px; }
.footer-social a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 9999px;
  margin: 0 6px;
}
.footer-bottom{ text-align: center; margin-top: 12px; opacity: .85; }

/* ---------- Footer på mobil: blokk sentrert, innhold venstrejustert ---------- */
@media (max-width: 640px){
  .footer-container{
    grid-template-columns: 1fr;    /* én kolonne */
    gap: 22px;
  }
  .footer-box{
    max-width: 560px;              /* pen bredde på mobil */
    margin: 0 auto;                /* sentrer selve kortet */
    padding: 0 18px;               /* litt side-luft */
    text-align: left !important;   /* VENSTREjuster all tekst */
    display: flex;
    flex-direction: column;
    align-items: flex-start;       /* også logo venstrejusteres */
    gap: 8px;
  }
  .footer-box img{
    align-self: flex-start;        /* logo linjesettes med teksten */
    margin: 0 0 10px 0;            /* luft under logoen */
    width: clamp(84px, 28vw, 120px);
    height: auto;
  }
  .footer-box h3,
  .footer-box p,
  .footer-box a{
    text-align: left !important;   /* sikre at ingen gamle regler overstyrer */
  }
}
/* Footer layout */
.footer-section .footer-container{
  max-width: 1200px;
  margin-inline: auto;
  padding: clamp(28px, 3vw, 48px) 16px;
  gap: clamp(24px, 3vw, 40px);
}

.footer-section .footer-box{
  text-align: left;         /* desktop venstre */
  align-items: flex-start;
}

.footer-section .footer-box img{
  display: block;
  width: clamp(120px, 8vw, 160px);
  height: auto;
  margin: 0 0 12px 0;       /* venstre på desktop */
  /* ingen hvit bakplate her – kun på Via3-varianten under */
}


/* Mobil: sentrer alt igjen for pen stacking */
@media (max-width: 768px){
  .footer-section .footer-box{
    text-align: center;
    align-items: center;
  }
  .footer-section .footer-box img{
    margin: 0 auto 12px;    /* sentrer logo */
  }
}
/* Logoene: samme høyde, runde hjørner */
.footer-section .footer-box img{
  display: block;
  height: clamp(84px, 9vw, 120px); /* samme visuelle høyde */
  width: auto;                     /* behold proporsjoner */
  border-radius: 10px;             /* runde hjørner på alle */
  margin: 0 0 12px 0;
  object-fit: contain;             /* trygghet om filstørrelser varierer */
}

/* Desktop: venstrejustert; mobil: sentrert */
.footer-section .footer-box{
  text-align: left;
  align-items: flex-start;
}

@media (max-width: 768px){
  .footer-section .footer-box{
    text-align: center;
    align-items: center;
  }
  .footer-section .footer-box img{
    margin: 0 auto 12px;
  }
}
/* Mobil: sentrer boksene i den grønne seksjonen, men behold venstrejustert tekst */
@media (max-width: 640px){
  .extra-section2 .container2{
    grid-template-columns: 1fr;   /* én boks per rad */
    justify-items: center;        /* sentrer selve boksen (ikke teksten) */
  }

  .extra-section2 .box2{
    width: min(560px, 92vw);      /* pen, smalere bredde på mobil */
    margin: 0 auto;               /* sentrer boksen horisontalt */
    text-align: left;             /* behold venstrejustert innhold */
    padding: 0 12px;              /* litt side-luft */
  }
}
/* Mobil: sentrer boksene (venstrejustert innhold) i .extra-section2  */
@media (max-width: 640px){
  .extra-section2 .container2{
    display: grid !important;
    grid-template-columns: 1fr !important;   /* én boks per rad */
  }
  .extra-section2 .container2 .box2{
    justify-self: center !important;         /* selve boksen i midten */
    max-width: 560px !important;             /* pen, smal bredde på mobil */
    width: 100% !important;                  /* fyll opptil max-width */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;             /* behold venstrejustert tekst */
    padding-left: 12px;                      /* litt side-luft */
    padding-right: 12px;
  }
}
/* Kontakt – sentrer boksene visuelt på mobil, men behold venstrejustert tekst */
@media (max-width: 640px){
  .extra-section2 .container2{
    grid-template-columns: 1fr;     /* én kolonne */
    justify-content: center;        /* senter kolonnen */
  }
  .extra-section2 .box2{
    width: min(560px, 92vw);        /* smal “kort” */
    margin-inline: auto;            /* sentrer kortet */
    text-align: left;               /* teksten venstrejustert */
    justify-self: center;           /* sikkerhet i grid */
  }
}
/* ——— VIA3: stabil palett (sRGB) ——— */
:root{
  --via3-green-50:  #e6f0e8;       /* lys grønn bakgrunn */
  --via3-green-500: #4ca43e;       /* merkegrønn */
  --via3-dark:      #2a5f52;       /* mørk grønn tekst */
}

/* Bruk samme lyse grønn overalt der du vil ha felt/kort i grønt */
.two-col-hero,
.extra-section2,
.dept-card{
  background-color: var(--via3-green-50) !important;
}

/* (Hvis du trengte transparens et sted, bruk rgba som fallback) */
/* .noe-med-transparens { background-color: rgba(230,240,232,.34) !important; } */

.fb-wrap { max-width: 450px; margin: 0 auto; }
  @media (max-width:600px){ .fb-wrap iframe{ width:100% !important; } }