{
    const template = ` <link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/design.css">

<footer>
  <ul>
    <li><a href="/IT-Kolleg/" target="_blank">&copy; 2025 TimeSync</a></li>
    <li><a href="/Rechtliches/">Impressum</a></li>
  </ul>
</footer>


<!-- Für Vorschau html -->
<script>
  document.head.insertAdjacentHTML(
    "beforeend",
    '<style>footer{position:fixed; bottom:0; width:100%;}</style><link rel="stylesheet" href="../../css/bootstrap.min.css"><link rel="stylesheet" href="../../css/design.css"><link rel="stylesheet" href="style.css"><meta name="viewport" content="width=device-width, initial-scale=1.0">'
  );
</script>
 `;
    const css = ` footer {
    padding: 1em 0;
    background-color: var(--headerFontColor);
    color: var(--backgroundColor);
}
footer ul {
        max-width: 500px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        white-space: nowrap;
        padding: 0;
        margin: 0 auto;
        list-style: none;
        opacity: 0.7;
    }


a {
    margin: 0 1em;
    text-decoration: none;
    color: var(--backgroundColor);
} `;
    window.customElements.define(
  "footer-svp",
  class extends HTMLElement {
    // static observedAttributes = ["attribut1", "attribut2", "attribut3"];

    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = template;
      const style = new CSSStyleSheet();
      style.replaceSync(css);
      this.shadowRoot.adoptedStyleSheets = [style];
      
      
    }

    // connectedCallback() {}

    // attributeChangedCallback(name, oldValue, newValue) {}
  }
);
}