html, body { margin: 0; padding: 0; }
body { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.bi-page { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }
.bi-content { flex: 1; }

/* ---- Navbar (single horizontal row, no bootstrap navbar classes) ---- */
.bi-navbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: linear-gradient(360deg, #f5f5f5, #ffffff);
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.05);
}
.bi-navbar-top {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem 0.25rem;
}
.bi-navbar-bottom {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 1rem 0.5rem;
}
.bi-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: #212529;
  font-weight: 700;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.bi-brand:hover { color: #980C13; text-decoration: none; }
.bi-brand-logo { display: inline-block; width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.bi-brand-logo svg { width: 100%; height: 100%; display: block; }
.bi-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.bi-nav-item { margin: 0; }
.bi-nav-link {
  color: #212529;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  display: inline-flex;
  align-items: center;
}
.bi-nav-link:hover { color: #980C13; text-decoration: none; }
.bi-nav-link-active { color: #980C13; font-weight: 700; }

/* Burger + checkbox hack - hidden on desktop */
.bi-nav-toggle { display: none; }
.bi-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.3125rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  margin-left: auto;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
}
.bi-burger:hover { background: rgba(0,0,0,0.05); }
.bi-burger-bar {
  display: block;
  width: 1.5rem;
  height: 0.1875rem;
  background: #212529;
  border-radius: 0.125rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 48em) {
  .bi-nav-list { gap: 1rem; }
  .bi-burger { display: inline-flex; }
  .bi-navbar-top { padding-bottom: 0.75rem; }
  .bi-navbar-bottom {
    max-height: 0;
    overflow: hidden;
    padding: 0 1rem;
    transition: max-height 0.25s ease, padding 0.25s ease;
  }
  .bi-nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0;
  }
  .bi-nav-link { padding: 0.5rem 0; font-size: 1rem; width: 100%; }
  .bi-nav-toggle:checked ~ .bi-navbar-bottom {
    max-height: 25rem;
    padding-bottom: 0.75rem;
    border-top: 1px solid #e0e0e0;
    margin-top: 0.5rem;
  }
  .bi-nav-toggle:checked ~ .bi-navbar-top .bi-burger .bi-burger-bar:nth-child(1) {
    transform: translateY(0.5rem) rotate(45deg);
  }
  .bi-nav-toggle:checked ~ .bi-navbar-top .bi-burger .bi-burger-bar:nth-child(2) {
    opacity: 0;
  }
  .bi-nav-toggle:checked ~ .bi-navbar-top .bi-burger .bi-burger-bar:nth-child(3) {
    transform: translateY(-0.5rem) rotate(-45deg);
  }
}

@media (max-width: 30em) {
  .bi-brand-title { font-size: 1.1rem; }
  .bi-brand-logo { width: 1.75rem; height: 1.75rem; }
}

/* ---- Info box (e.g. EAN info on Kontakt page) ---- */
.bi-info-box {
  margin-top: 0.9375rem;
  background-color: rgb(248, 249, 250);
  font-size: 0.95em;
  padding: 0.625rem;
  border-radius: 0.25rem;
}

/* ---- Hero with carousel (matches old project) ---- */
.bi-hero {
  position: relative;
  min-height: 31.25rem;
  display: flex;
  align-items: center;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  color: #ffffff;
}
.bi-hero-layers { position: absolute; inset: 0; }
.bi-hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.bi-hero-layer.bi-active { opacity: 1; }
.bi-hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); z-index: 1; }
.bi-hero-inner {
  position: relative;
  z-index: 2;
  padding: 3.75rem 2.5rem;
  max-width: 53rem;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
.bi-hero-title {
  color: #ffffff;
  font-size: 2em;
  line-height: 1.2;
  margin-top: 5rem;
  margin-bottom: 3.125rem;
}
.bi-hero-subtitle {
  color: #ffffff;
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 3.125rem;
}

/* ---- Red CTA button (matches old project: #C00000) ---- */
.bi-cta {
  background-color: #C00000;
  border-color: #C00000;
  color: #ffffff !important;
  padding: 0.75rem 1.875rem;
  font-size: 1em;
  font-weight: 500;
  border-radius: 0.25rem;
  text-decoration: none !important;
}
.bi-cta:hover { background-color: #a00000; border-color: #a00000; color: #ffffff !important; }

/* ---- Sections ---- */
.bi-section { padding: 3.5rem 1rem; }
.bi-section h2 { text-align: left; font-size: 1.875rem; color: #5F0A05; margin: 0 0 1rem; font-weight: 600; }
.bi-section-white { background: #ffffff; }
.bi-section-red { background: #980C13; color: #ffffff; }
.bi-section-red h2 { color: #ffffff; }
.bi-section-red a { color: #ffffff; text-decoration: none; }

.bi-narrow { max-width: 50rem; margin: 0 auto; }

/* ---- Feature grid ---- */
.bi-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}

@media (max-width: 767px) { .bi-features { grid-template-columns: 1fr; } }
.bi-feature { text-align: center; }
.bi-feature-icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 0.75rem; color: #5F0A05; }
.bi-feature-icon svg { width: 100%; height: 100%; display: block; }
.bi-feature-icon svg path,
.bi-feature-icon svg circle,
.bi-feature-icon svg rect,
.bi-feature-icon svg line,
.bi-feature-icon svg polyline,
.bi-feature-icon svg polygon { stroke: #5F0A05; }
.bi-feature h3 { font-size: 1.125rem; margin: 0 0 0.5rem; color: #5F0A05; font-weight: 600; }
.bi-feature p { margin: 0; font-size: 0.875rem; color: #5F0A05; }

/* ---- Process steps (legacy card list) ---- */
.bi-step { margin: 1.5rem 0; padding: 1rem; border-left: 0.25rem solid #980C13; background: #f8f8f8; }
.bi-step h3 { margin: 0 0 0.5rem; color: #980C13; font-size: 1.125rem; }
.bi-step p { margin: 0; }

/* ---- Process flowchart (replicates old project) ---- */
.bi-flowchart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 2rem 0;
}
.bi-flow-step {
  background-color: #980C13;
  color: #ffffff;
  padding: 0.75rem 1.875rem;
  border-radius: 1.5625rem;
  font-size: 1em;
  font-weight: 500;
  text-align: center;
  min-width: 17.5rem;
  max-width: 21.875rem;
}
.bi-flow-line {
  width: 0.125rem;
  height: 0.9375rem;
  background-color: #980C13;
}
.bi-flow-arrow-head {
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.625rem solid #980C13;
}
.bi-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bi-flow-branch {
  width: 100%;
  max-width: 34rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bi-flow-split, .bi-flow-merge {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bi-flow-split-u, .bi-flow-merge-u {
  position: relative;
  width: 50%;
  height: 1.25rem;
  border-left: 0.125rem solid #980C13;
  border-right: 0.125rem solid #980C13;
}
.bi-flow-split-u { border-top: 0.125rem solid #980C13; }
.bi-flow-merge-u { border-bottom: 0.125rem solid #980C13; }
.bi-flow-split-u::before,
.bi-flow-split-u::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  width: 0;
  height: 0;
  border-left: 0.4rem solid transparent;
  border-right: 0.4rem solid transparent;
  border-top: 0.5rem solid #980C13;
  transform: translateX(-50%);
}
.bi-flow-split-u::before { left: 0.0625rem; }
.bi-flow-split-u::after  { left: calc(100% - 0.0625rem); }
.bi-flow-boxes {
  display: flex;
  width: 100%;
  gap: 1.25rem;
  margin: 0.5rem 0 0;
}
.bi-flow-boxes .bi-flow-step {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  text-align: center !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 36em) {
  .bi-flow-boxes { flex-direction: column; gap: 0.5rem; }
  .bi-flow-split-u, .bi-flow-merge-u { width: 70%; }
}

/* ---- /proces betingelser links ---- */
.bi-underline-links a { text-decoration: underline; }

/* ---- Bank rows ---- */
.bi-bank-row { display: flex; justify-content: space-between; padding: 0.375rem 0; border-bottom: 1px solid #eee; }
.bi-bank-row:last-child { border-bottom: 0; }

/* ---- Footer (matches old project: light gradient + dark text) ---- */
.bi-footer { background: linear-gradient(#f5f5f5, #ffffff); color: #333; padding: 2rem 1rem; font-size: 0.875rem; border-top: 1px solid #e0e0e0; }
.bi-footer-inner { max-width: 50rem; margin: 0 auto; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem; }
.bi-footer-col { flex: 1; min-width: 14rem; }
.bi-footer-col-contact { min-width: 17rem; }
.bi-footer-col strong { display: block; font-size: 1.2em; margin-bottom: 0.5rem; }
.bi-footer-contact-row { white-space: nowrap; }
.bi-footer a { color: inherit; text-decoration: underline; }

/* ---- Kontakt floating widget (matches old project: expanding panel) ---- */
.bi-kontakt-widget {
  position: fixed;
  bottom: 0;
  right: 1.25rem;
  z-index: 1000;
  width: 22rem;
  max-width: calc(100vw - 2.5rem);
  background-color: #ffffff;
  border-radius: 0.5rem 0.5rem 0 0;
  box-shadow: 0 -0.25rem 1.25rem rgba(0, 0, 0, 0.15);
}
.bi-kontakt-toggle {
  background-color: #980C13;
  color: #ffffff;
  border: 0;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem 0.5rem 0 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.bi-kontakt-toggle:hover { background-color: #7d0a0f; }
.bi-kontakt-body {
  max-height: 80vh;
  overflow-y: auto;
  padding: 1rem;
}

@media (max-width: 48em) {
  .bi-kontakt-widget.bi-open {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    z-index: 1030;
  }
  .bi-kontakt-widget.bi-open .bi-kontakt-body { max-height: calc(100vh - 3.25rem); }
}

/* Employee card */
.bi-emp-card { background: #f8f9fa; border-radius: 0.5rem; padding: 1.25rem; margin-bottom: 1.5rem; }
.bi-emp-row { display: flex; align-items: center; gap: 1.25rem; }
.bi-emp-photo,
.bi-emp-photo-img {
  width: 6.25rem; height: 6.25rem; border-radius: 50%;
  flex-shrink: 0;
}
.bi-emp-photo {
  display: flex; align-items: center; justify-content: center;
  background-color: #6c757d; color: #ffffff;
  font-size: 1.5rem; font-weight: 700;
}
.bi-emp-photo-img { object-fit: cover; background-color: #dee2e6; }
.bi-emp-info h3 { margin: 0 0 0.3125rem; color: #333; font-size: 1.2em; }
.bi-emp-title { margin: 0 0 0.3125rem; color: #666; font-size: 0.95em; }
.bi-emp-phone { margin: 0; font-size: 0.9em; }
.bi-emp-email { margin: 0.75rem 0 0; font-size: 0.9em; }
.bi-emp-card a { color: #007bff; }

/* Contact form */
.bi-contact-form { background: #fff; border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 1.25rem; }
.bi-contact-form h3 { margin: 0 0 1.25rem; color: #333; font-size: 1.2em; }
.bi-form-label { display: block; margin: 0.5rem 0 0.25rem; font-weight: 500; font-size: 0.9em; }
.bi-form-control {
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #212529;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background-color: #fff;
}

textarea.bi-form-control { resize: vertical; min-height: 5rem; }
.bi-form-control:focus { outline: none; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); }
.bi-form-help { display: block; margin-top: 0.25rem; color: #6c757d; font-size: 0.8em; }
.bi-form-submit {
  margin-top: 1rem;
  width: 100%;
  padding: 0.5rem;
  background-color: #343a40;
  color: #ffffff;
  border: 0;
  border-radius: 0.25rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.bi-form-submit:hover { background-color: #23272b; }
.bi-form-submit:disabled { background-color: #6c757d; cursor: not-allowed; }
.bi-form-req { color: #980C13; }
.bi-form-error {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  background-color: #f8d7da;
  border: 1px solid #f5c2c7;
  color: #842029;
  border-radius: 0.25rem;
  font-size: 0.85em;
}
.bi-contact-success {
  text-align: center;
  padding: 1.5rem 1rem;
  animation: bi-fade-in 0.3s ease-out;
}
.bi-contact-success-icon {
  width: 3.5rem; height: 3.5rem;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  background-color: #d1e7dd;
  color: #0f5132;
  border-radius: 50%;
  font-size: 2rem;
  font-weight: 700;
}
.bi-contact-success h3 { margin: 0 0 0.5rem; color: #333; font-size: 1.25em; }
.bi-contact-success p { margin: 0; color: #6c757d; }
@keyframes bi-fade-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}