<style>
.wrapper {
  font: 16px Brush Script MT, cursive;
  position: fixed;
  bottom: 50px;
  right: -400px;
  max-width: 345px;
  width: 100%;
  background: #333333;
  border-radius: 8px;
  border: 1px solid #fff;
  padding: 15px 25px 22px;
  transition: right 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  z-index:999999;
}
.wrapper.show {
  right: 20px;
}
.wrapper header {
  display: flex;
  align-items: center;
  column-gap: 15px;
}
header i {
  color: #fff;
  font-size: 32px;
}
header h2 {
  color: #646666;
  font-weight: 500;
}
.wrapper .data {
  margin-top: 16px;
}
.wrapper .data p {
  color: #000;
  font: 16px Brush Script MT, cursive;
}
.wrapper .data p a {
  color: #000;
  text-decoration: none;
  font: 16px Brush Script MT, cursive;
}
.wrapper .data p a:hover {
  text-decoration: underline;
}
.wrapper .buttons {
  margin-top: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrapper .buttons .button {
  font: 16px Brush Script MT, cursive;
  border: none;
  color: #000;
  padding: 8px 0;
  border-radius: 4px;
  border: 2px solid green;   
  background: linear-gradient(0deg, #1a1a1a 0%, #fff 50%, #1a1a1a 100%)!important;
  cursor: pointer;
  width: calc(100% / 2 - 10px);
  transition: all 0.2s ease;
}
.wrapper .buttons #acceptBtn:hover {
  color: green;
}
.wrapper #declineBtn {
  border: 2px solid red;
  background-color: #fff;
  color: #000;
}
.wrapper #declineBtn:hover {
  background-color: red;
  color: red;
}  
</style> 
 
<!-- Boxicons CSS -->
<link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet" /> 
 
 
<div class="wrapper">
  <header>
    <i class="bx bx-cookie"></i>
    <h2>Einwilligung zu Cookies</h2>
  </header>
 
  <div class="data">
    <p>Dieses Forum verwendet Cookies, um Ihnen ein besseres und relevanteres Surferlebnis auf dem Forum zu ermöglichen. <a href="./datenschutz.html"> Mehr lesen...</a></p>
  </div>
 
  <div class="buttons">
    <button class="button" id="acceptBtn">Akzeptieren</button>
    <button class="button" id="declineBtn">Ablehnen</button>
  </div>
</div>
 
<script> 
const cookieBox = document.querySelector(".wrapper"),
  buttons = document.querySelectorAll(".button");
 
  const executeCodes = () => {
  //Wenn das Cookie Codinglab enthält, wird es zurückgegeben und der darunter liegende Code wird nicht ausgeführt
  if (document.cookie.includes("codinglab")) return;
  cookieBox.classList.add("show");
 
  buttons.forEach((button) => {
    button.addEventListener("click", () => {
      cookieBox.classList.remove("show");
 
      //Wenn die Schaltfläche die AcceptBtn-ID hat
      if (button.id == "acceptBtn") {
        //Cookies für 1 Monat setzen.  60 = 1 Minute, 60 = 1 Stunde, 24 = 1 Tag, 30 = 30 Tage
        document.cookie = "cookieBy= codinglab; max-age=" + 60 * 60 * 24 * 30;
      }
    });
  });
};
 
//Die Funktion „executeCodes“ wird beim Laden der Webseite aufgerufen
window.addEventListener("load", executeCodes);
</script>