Frist design draft

custom.css

@@ -0,0 +1,163 @@
+body {
+  --w-body: 100%;
+  grid-template-columns: min-content auto min-content; 
+  font-family: var(--f-sans);
+}
+
+div#paginationContainer { margin: 1em 0; }
+div#paginationContainer a { display: inline-block; padding: 0.3em 0.8em; border-radius: 0.5rem; text-decoration: none; }
+div#paginationContainer a.active { background: hsl(var(--hs-static), var(--l-lowest)); color: hsl(var(--hs-static), var(--l-highest)); }
+div#paginationContainer a:hover { text-decoration: underline; }
+section#sidebar {
+  width: 100%;
+  flex-grow: 1;
+}
+
+@media only screen and (min-width: 1000px) {
+  main#content {
+    grid-area: content;
+  }
+  html {
+    font-size: 50%;
+  }
+  section#sidebar {
+    grid-area: sidebar;
+    flex-grow: 1;
+    margin-right: 2ch;
+  }
+  div.wrapper {
+    display: grid;
+    gap: 2em;
+    grid-template-areas: "content" "sidebar";
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "sidebar content";
+  }
+}
+
+td { vertical-align: top; }
+
+td:nth-child(5) {
+  font-style: italic;
+}
+
+td a.identifier {
+  color: hsl(var(--hs-interactive), var(--l-interactive));
+  text-decoration: none;
+  border-radius: 0.5rem;
+  padding: 2px 4px;
+  min-width: 6ch;
+  display: inline-block;
+}
+
+/*
+	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
+  Source: https://css-tricks.com/responsive-data-table-roundup/
+	*/
+	@media
+	  only screen 
+    and (max-width: 760px), (min-device-width: 768px) 
+    and (max-device-width: 1024px)  {
+
+    table {
+      margin-top: 2em;
+      table-layout: fixed;
+    }
+
+		/* Force table to not be like tables anymore */
+		table, thead, tbody, th, td, tr {
+			display: block;
+		}
+
+    tr {
+      margin-bottom: 2em;
+    }
+
+		/* Hide table headers (but not display: none;, for accessibility) */
+		thead tr {
+			position: absolute;
+			top: -9999px;
+			left: -9999px;
+		}
+
+		td {
+			/* Behave  like a "row" */
+			border: none;
+			position: relative;
+			padding-left: 30%;
+		}
+
+		td:before {
+			/* Now like a table header */
+			position: absolute;
+			/* Top/left values mimic padding */
+			top: 0;
+			left: 6px;
+			white-space: nowrap;
+      font-weight: bold;
+		}
+
+		/*
+		Label the data
+    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
+		*/
+		td:nth-of-type(1):before { content: "ID"; }
+		td:nth-of-type(2):before { content: "Datum"; }
+		td:nth-of-type(3):before { content: "Von"; }
+		td:nth-of-type(4):before { content: "Bis"; }
+		td:nth-of-type(5):before { content: "Thema"; }
+		td:nth-of-type(6):before { content: "PLZ"; }
+		td:nth-of-type(7):before { content: "Str, Nr"; }
+		td:nth-of-type(8):before { content: "Strecke"; }
+	}
+
+header {
+  min-height: 3em;
+}
+
+body header h1 a:any-link {
+  text-decoration: none;
+  color: hsl(var(--hs-static), var(--l-lowest)); 
+  padding: 0.3em 0.8em;
+  border-radius: 0.5rem; 
+  text-transform: uppercase;
+  letter-spacing: 3px;
+}
+
+img {
+  float:left;
+}
+
+
+body header h1 a:any-link:hover {
+  background: transparent;
+  color: hsl(var(--hs-interactive), var(--l-interactive));
+}
+
+
+button.to-top {
+  position: fixed;
+  bottom: 1em;
+  left: 1em;
+  padding: 0.3em 0.8em;
+}
+
+div#error-message {
+  background: hsl(var(--hs-error), var(--l-high));
+  border-radius: 0.5rem;
+  margin: 1em 0 0 0;
+  padding: 0.3em 0.8em;
+}
+
+div#info-message {
+  background: hsl(var(--hs-highlight), var(--l-high));
+  border-radius: 0.5rem;
+  margin: 1em 0 0 0;
+  padding: 0.3em 0.8em;
+}
+
+
+div#totalResults {
+  margin-top: 2em;
+}
+
+