:root {
  --bg-color: #f8f8f8;
  --brand: #01632e;
  --action: #87b617;
  --second: #b9ebff;
  --third: #fafac8;
  --brandlight: #94bda7;
  --actionlight: #c3da8b;
  --secondlight: #d5f3ff;
  --bs-border-radius: 2rem;
}

body {
  font-family: 'OpenSans', sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  line-height: 1.5;
  color: #383838;
  background-color: var(--bg-color);
}

.container,
.container-lg,
.container-xl,
.container-xxl {
  max-width: 1440px !important;
}

@font-face {
  font-family: 'OpenSans';
  font-weight: 0 1700;
  src: url(../font/OpenSans-VariableFont_wdth,wght.ttf) format('truetype');
}

@font-face {
  font-family: 'Material Symbols Rounded';
  src: url('../font/MaterialSymbolsRounded_28pt-ExtraLight.ttf') format('truetype');
}

.icon {
  font-family: 'Material Symbols Rounded';
  font-weight: 100 !important;
  display: inline-block;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}

.icon-sm {
  font-size: 1rem;
}

.icon-md {
  font-size: 2rem;
}

.icon-lg {
  font-size: 3rem;
}

.icon-xl {
  font-size: 4rem;
}

.text-link-brand {
  position: relative;
  color: var(--brand);
  text-decoration: none;
  font-weight: 300;
}

.text-link-brand::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  left: 0;
  bottom: -2px;
  background: var(--brand);
  transition: width 0.3s ease;
}

.text-link-brand:hover::after {
  width: 100%;
}


.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: 300;
  line-height: 1.3;
  color: #000000;
}

.h1,
h1 {
  font-size: calc(1.375rem + 1.5vw)
}

@media (min-width:1200px) {

  .h1,
  h1 {
    font-size: 2.5rem
  }
}

.h2,
h2 {
  font-size: calc(1.325rem + .9vw)
}

@media (min-width:1200px) {

  .h2,
  h2 {
    font-size: 2.2rem
  }
}

.h3,
h3 {
  font-size: calc(1.3rem + .6vw)
}

@media (min-width:1200px) {

  .h3,
  h3 {
    font-size: 2rem
  }
}

.h4,
h4 {
  font-size: calc(1.275rem + .3vw)
}

@media (min-width:1200px) {

  .h4,
  h4 {
    font-size: 1.8rem
  }
}

.h5,
h5 {
  font-size: calc(1.2rem + .3vw)
}

@media (min-width:1200px) {

  .h5,
  .h5 {
    font-size: 1.3rem
  }
}

.h6,
h6 {
  font-size: 1.1rem
}

.bg-brand {
  background-color: var(--brand) !important;
}

.bg-action {
  background-color: var(--action) !important;
}

.bg-second {
  background-color: var(--second) !important;
}

.bg-third {
  background-color: var(--third) !important;
}

.bg-brandlight {
  background-color: var(--brandlight) !important;
}

.bg-actionlight {
  background-color: var(--actionlight) !important;
}

.bg-secondlight {
  background-color: var(--secondlight) !important;
}

.text-brand {
  color: var(--brand) !important;
}

.text-action {
  color: var(--action) !important;
}

.text-second {
  color: var(--second) !important;
}

.text-third {
  color: var(--third) !important;
}

.border-brand {
  border-color: var(--brand) !important;
}

.border-action {
  border-color: var(--action) !important;
}

.border-second {
  border-color: var(--second) !important;
}

.border-third {
  border-color: var(--third) !important;
}

/* =========================
   Buttons
   ========================= */
/* Bootstrap-compatible vars for btn-* utilities (optional) */
.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: #014c23;
  --bs-btn-hover-border-color: #014c23;
  --bs-btn-active-bg: #013d1c;
  --bs-btn-active-border-color: #013d1c;
}

.btn-action {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--action);
  --bs-btn-border-color: var(--action);
  --bs-btn-hover-bg: #6a8f13;
  --bs-btn-hover-border-color: #6a8f13;
  --bs-btn-active-bg: #56720f;
  --bs-btn-active-border-color: #56720f;
}

.btn-second {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--second);
  --bs-btn-border-color: var(--second);
  --bs-btn-hover-bg: #9cd7f2;
  --bs-btn-hover-border-color: #9cd7f2;
  --bs-btn-active-bg: #83c9ec;
  --bs-btn-active-border-color: #83c9ec;
}

.btn-third {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--third);
  --bs-btn-border-color: var(--third);
  --bs-btn-hover-bg: #f5f599;
  --bs-btn-hover-border-color: #f5f599;
  --bs-btn-active-bg: #f0f066;
  --bs-btn-active-border-color: #f0f066;
}

/* Custom brand buttons (your preferred look) */
.btn-brand {
  background-color: var(--brand);
  color: #fff;
  border: 2px solid var(--action);
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-block;
  padding: 0.7rem 1.6rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.btn-brand:hover,
.btn-brand:focus {
  border-color: var(--brand);
  color: #fff;
}

.btn-brand-outline {
  background-color: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-block;
  padding: 0.7rem 1.6rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.btn-brand-outline:hover,
.btn-brand-outline:focus {
  background-color: var(--brand);
  color: #fff;
}

.btn-dark-outline {
  background-color: transparent;
  color: #000000;
  border: 2px solid #000000;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-block;
  padding: 0.7rem 1.6rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.btn-dark-outline:hover,
.btn-dark-outline:focus {
  background-color: #000000;
  color: #fff;
}

.btn-light-outline {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #87b617;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-block;
  padding: 0.7rem 1.6rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.btn-light-outline:hover,
.btn-light-outline:focus {
  background-color: #ffffff;
  color: var(--brand);
}

.nav-link {
  font-size: 1rem;
  padding: 0.75rem 0;
  color: #333;
  font-weight: 300;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--brand);
}

.hero {
  background-image: url('/assets/miljoe/Vindmoeller-opklaring.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer-container {
  margin-inline: auto;
  padding-inline: 1rem;
}

.corner-badge {
  position: absolute;
  top: 100%;
  /* right below the green bar */
  left: 0;
  width: 100px;
  height: 100px;
  font-size: 0.9rem;
  line-height: 1;
  font-weight: 300;
}

.corner-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 100px solid var(--second);
  /* secondary color triangle */
  border-right: 100px solid transparent;
}

.corner-badge span {
  position: absolute;
  top: 18px;
  left: -3px;
  transform: rotate(-45deg);
  color: #000;
}

@media (min-width: 992px) {
  .rounded-lg-end {
    /* fjern venstre hjørner */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    /* behold kun højre (end) hjørner runde */
    border-top-right-radius: 2rem !important;
    border-bottom-right-radius: 2rem !important;
  }
}

.back-to-top {
  position: fixed;
  bottom: 2rem;
  /* Afstand fra bunden */
  right: 2rem;
  /* Afstand fra højre */
  width: 48px;
  height: 48px;
  border: 2px solid #ccc;
  /* Lys grå border */
  border-radius: 50%;
  /* Gør den cirkulær */
  background: #fff;
  /* Hvid baggrund */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.2s ease;
  opacity: 0;
  pointer-events: none;
  /* Deaktiver klik når den er skjult */
}

/* Når den skal være synlig (kan toggles med JS ved scroll) */
.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Hover-effekt */
.back-to-top:hover {
  border-color: #999;
  transform: translateY(-3px);
}

.back-to-top img {
  width: 24px;
  height: 24px;
}