{
    const template = ` <footer>
  <ul>
    <li><a href="" target="_blank">&copy; 2026 Remo</a></li>
    <li><a href="/Rechtliches/">Impressum</a></li>
  </ul>
</footer> `;
    const css1 = ` :root {
    --backgroundColor: #f2f2f2;
    --headerFontColor: #0570B4;
}

body {
    background-color: var(--backgroundColor);
}

h1,
h2,
h3,
h4 {
    color: var(--headerFontColor);
} `;
    const css2 = ` 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-app",
  class extends HTMLElement {
    // static observedAttributes = ["attribut1", "attribut2", "attribut3"];

    constructor() {
      super();
      this.attachShadow({ mode: "open" });
      this.shadowRoot.innerHTML = template;
      this.shadowRoot.adoptedStyleSheets = [css1, css2].map(css => ((sheet => (sheet.replaceSync(css), sheet))(new CSSStyleSheet())));
      
      
    }

    // connectedCallback() {}

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