Phase 5c: CSS layers and light theme

- html/css split into tokens.css (custom properties), base.css (reset,
  typography, focus, skip link), components.css (buttons, inputs, tables,
  status cards, popups, menu, log lines) and layout.css (shell, sidebar,
  header, breakpoints); screen.css removed. Selectors and declarations
  moved as-is; three pairs of conflicting rules resolved in favour of the
  one that already won the cascade, two empty rules dropped.
- Every literal colour outside tokens.css is now a token (category badge
  borders excepted). color-scheme set so native controls follow.
- Light theme under prefers-color-scheme: light, with explicit
  data-theme="light"/"dark" overrides on :root for a future toggle.
  Body text 13.6:1, muted text 5.4:1, accent 5.1:1 on the light background.
- HTML: lang="en" everywhere, one h1 per page, maintenance page uses
  <main>, an id typo fixed.

ts/configuration.ts

@@ -0,0 +1,177 @@
+class WizardCategory {
+  DocumentID = "content"
+
+  createCategoryHeadline(value:string):any {
+    var element = document.createElement("H4")
+    element.innerHTML = value
+    return element
+  }
+}
+
+class WizardItem extends WizardCategory {
+  key:string
+  headline:string
+
+  constructor(key:string, headline:string) {
+    super()
+    this.headline = headline
+    this.key = key
+  }
+
+  createWizard():void {
+    var headline = this.createCategoryHeadline(this.headline)
+    var key = this.key
+    var content:PopupContent = new PopupContent()
+    var description:string
+
+    var doc = document.getElementById(this.DocumentID)
+    doc.innerHTML = ""
+    doc.appendChild(headline)
+
+    switch (key) {
+      case "tuner":
+        var text = new Array()
+        var values = new Array()
+
+        for (var i = 1; i <= 100; i++) {
+          text.push(i)
+          values.push(i)
+        }
+
+        var select = content.createSelect(text, values, "1", key)
+        select.setAttribute("class", "wizard")
+        select.id = key
+        doc.appendChild(select)
+
+        description = "Number of parallel connections that can be established to the provider.<br>Available for: Plex, Emby (HDHR), M3U (with active buffer).<br>After a change, xTeVe must be delete in the Plex / Emby DVR settings and set up again."
+
+        break;
+      
+      case "epgSource":
+        var text:any[] = ["PMS", "XEPG"]
+        var values:any[] = ["PMS", "XEPG"]
+
+        var select = content.createSelect(text, values, "XEPG", key)
+        select.setAttribute("class", "wizard")
+        select.id = key
+        doc.appendChild(select)
+
+        description = "PMS:<br>- Use EPG data from Plex or Emby <br><br>XEPG:<br>- Use of one or more XMLTV files<br>- Channel management<br>- M3U / XMLTV export (HTTP link for IPTV apps)"
+
+        break
+
+      case "m3u":
+        var input = content.createInput("text", key, "")
+        input.setAttribute("placeholder", "File path or URL of the M3U")
+        input.setAttribute("class", "wizard")
+        input.id = key
+        doc.appendChild(input)
+
+        description = "Local or remote playlists"
+
+        break
+
+      case "xmltv":
+        var input = content.createInput("text", key, "")
+        input.setAttribute("placeholder", "File path or URL of the XMLTV")
+        input.setAttribute("class", "wizard")
+        input.id = key
+        doc.appendChild(input)
+
+        description = "Local or remote XMLTV file"
+
+      break
+
+      default:
+        console.log(key)
+        break;
+    }
+
+    var pre = document.createElement("PRE")
+    pre.innerHTML = description
+    doc.appendChild(pre)
+
+    console.log(headline, key)
+  }
+
+
+}
+
+
+function readyForConfiguration(wizard:number) {
+
+  var server:Server = new Server("getServerConfig")
+  server.request(new Object())
+
+  showElement("loading", false)
+
+  configurationWizard[wizard].createWizard()
+
+}
+
+function saveWizard() {
+
+  var cmd = "saveWizard"
+  var div = document.getElementById("content")
+  var config = div.getElementsByClassName("wizard")
+
+  var wizard = new Object()
+
+  for (var i = 0; i < config.length; i++) {
+
+    var name:string
+    var value:any
+    
+    switch (config[i].tagName) {
+      case "SELECT":
+        name = (config[i] as HTMLSelectElement).name
+        value = (config[i] as HTMLSelectElement).value
+
+        // Wenn der Wert eine Zahl ist, wird dieser als Zahl gespeichert
+        if(isNaN(value)){
+          wizard[name] = value
+        } else {
+          wizard[name] = parseInt(value)
+        }
+
+        break
+
+      case "INPUT":
+        switch ((config[i] as HTMLInputElement).type) {
+          case "text":
+            name = (config[i] as HTMLInputElement).name
+            value = (config[i] as HTMLInputElement).value
+
+            if (value.length == 0) {
+              var msg = name.toUpperCase() + ": " + "Missing input"
+              alert(msg)
+              return
+            }
+
+            wizard[name] = value
+            break
+        }
+        break
+      
+      default:
+        // code...
+        break;
+    }
+
+  }
+
+  var data = new Object()
+  data["wizard"] = wizard
+
+  var server:Server = new Server(cmd)
+  server.request(data)
+
+  console.log(data)
+}
+
+// Wizard
+var configurationWizard = new Array()
+configurationWizard.push(new WizardItem("tuner", "Number of tuners"))
+configurationWizard.push(new WizardItem("epgSource", "EPG Source"))
+configurationWizard.push(new WizardItem("m3u", "M3U Playlist"))
+configurationWizard.push(new WizardItem("xmltv", "XMLTV File"))