/* HERO */
.hero img {
    width: 100%;
    height: 735px;
  }

  .hero {
    position: relative; /* Sørger for, at indholdet kan placeres relativt til hero-containeren */
    display: flex; /* Brug Flexbox til centrering */
    height: 715px; /* Sørger for, at hero-containeren har samme højde som billedet */
  }

  .hero h1 {
    font-family: 'Italiana', serif;
    font-size: 80px;
    font-weight: lighter;
    letter-spacing: 10px;
    color: white; /* Gør teksten hvid for bedre kontrast */
    position: absolute; /* Placerer teksten relativt til hero-containeren */
    bottom: 20px; /* Placer teksten 20px fra bunden */
    right: 20px; /* Placer teksten 20px fra højre */
    text-align: right; /* Juster teksten til højre */
}

  main {
    font-family: 'Darker Grotesque', sans-serif;
    background-color: #F8F5F0;
    padding: 0;
    margin: 0;
  }

  
  .kortsektion {
    position: relative;
    width: 100%;
  }
  
  
  .kortsektion img {
    width: 100%;
  }

  .kort-baggrund {
    width: 100%;
    height: auto;
    display: block;
  }

  .intro {
    position: absolute;
    top: 25%; /* højden fra heri til tekst */
    left: 50%;
    transform: translate(-50%, -30%);
    width: 60%;
    text-align: center;
  }
  
  
  .intro h1 {
    font-family: 'Italiana', serif;
    font-weight: 300;
    font-size: 30px;
  }

  .intro hr {
    width: 40px;
    border: 1px solid black;
    margin: 20px auto;
  }

  .intro p {
    font-size: 18px;
    line-height: 1.7;
  }

  input[type="checkbox"] {
    display: none;
  }

  .filtrer-bar {
    display: flex;
  }
  
  .filtrer {
    display: flex;
    justify-content: space-between;
    padding: 0 8.5%; /* Tilføjer afstand til venstre og højre */
  }
  
  .se-alle {
    text-decoration: none;
    color: black;
    font-size: 18px;
  }
  
  .filter {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
  }
  
  .filter-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
  }
  
  .produkt-sektion {
    display: flex;
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    position: relative;
    margin-top: 0;
  }

  .sæt1, .sæt2 {
    height: 600px; /* Begræns højden */
}
  
  .boks {
    flex: 1;
  }
  
  .billede-boks img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .tekst-boks {
    position: relative;
    padding: 40px;
    background-color: #FCFBF9;
  }
  
  .tekst-boks p {
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 20px;
  }
  
  .tekst-boks h2 {
    font-family: 'Italiana', serif;
    font-weight: 300;
    font-size: 30px;
    margin-bottom: 20px;
  }
  
  .bar {
    background-color: #eee;
    height: 15px;
    width: 70%;
    max-width: 500px;
  }
  
  .bar-fill {
    background-color: #D3D3B2;
    height: 100%;
  }
  
  .egenskaber p {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .pris-container {
    position: absolute;
    bottom: 40px;
    right: 10px;
    text-align: right;
  }
  
  .pris {
    font-size: 18px;
    font-weight: bold;
    margin-right: 30px;
  }
  
  .btn {
    padding: 8px 16px;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    font-size: 16px;
    display: inline-block;
    margin-right: 20px;
    transition: transform 0.3s ease;
  }
  
  .btn:hover {
    transform: scale(1.1);
    background-color: #D3D3B2; /* Skift baggrund til sort */
    color: black; /* Skift tekstfarve til hvid */
}
  
  .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    color: black;
    display: inline-block;
  }
  
  .left-arrow {
    left: -50px;
  }
  
  .right-arrow {
    right: -50px;
  }
  
  .arrow:hover {
    transform: translateY(-50%) scale(1.2);
  }
  
  /* Indhold toggle */
  .indhold {
    display: flex;
    width: 100%;
  }
  
  .sæt2 {
    display: none;
  }
  
  #toggle:checked ~ .produkt-sektion .sæt1 {
    display: none;
  }
  
  #toggle:checked ~ .produkt-sektion .sæt2 {
    display: flex;
  }

  @media (max-width: 768px) {
    .hero {
      height: 480px; /* Reducer højden på hero-containeren */
  }

  .hero img {
      height: 100%; /* Reducer højden på billedet */
      object-fit: cover; /* Sørger for, at billedet stadig fylder containeren korrekt */
    }
    .hero h1 {
      font-size: 40px; /* Mindre skriftstørrelse på små skærme */
      bottom: 50px; /* Juster placering */
      right: 10px; /* Juster placering */
      text-align: center; /* Centrer teksten */
    }

    .kortsektion {
      position: relative;
    }
  
    .kort-baggrund {
      position: relative;
      width: 100%;
      height: auto;
      display: block;
    }
  

    /* Tilpas header og tekst i introsektion */
    .kortsektion {
      position: relative;
      width: 100%;
      text-align: center;
      margin-bottom: 0;
      padding: 0;
    }
  
    .kort-baggrund {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* Fylder hele kortsektionen */
      z-index: 0;
      object-fit: cover;
    }
  
    .intro {
      position: absolute; /* Behold absolute hvis du ønsker teksten ovenpå */
      top: 10%; /* Flyt teksten længere ned på billedet */
      left: 50%;
      transform: translateX(-50%);
      width: 90%;
      text-align: center;
    }
  
    .intro h1, .intro p {
      text-align: center;
      color: black; /* Sørg for kontrast på baggrunden */
    }
  
    .kortsektion {
      min-height: 800px; /* Gør hele sektionen stor nok til at dække teksten */
    }

  .produkt-sektion {
    padding: 40px;
    margin: 0 auto;
  }

  .billede-boks {
    display: none; /* Skjuler billeddelen */
  }

  .tekst-boks {
    width: 100%;
    padding: 20px;
  }

  .sæt1, .sæt2 {
    height: 470px; /* Begræns højden */
}

  .bar {
    width: 70%; /* Tilpas barbredden */
  }

  .pris-container {
    position: static; /* Fjern absolut placering */
    margin-top: 20px;
  }

  .arrow {
        position: absolute; /* Sørger for, at pilene kan placeres relativt til boksen */
        top: 50%; /* Placer pilene i midten af boksen */
        transform: translateY(-50%); /* Juster placeringen for præcis centering */
        font-size: 1.5rem; /* Bevar skriftstørrelsen */
        color: black; /* Sørger for kontrast */
    }

  .left-arrow {
    left: 10px;
  }

  .right-arrow {
    right: 10px;
  }

  .tekst-boks h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .tekst-boks p {
    font-size: 16px;
    line-height: 1.5;
  }
}