New layout

This includes some feedback from #10. Additionally, the layout is revised with a new main page, restructured tabs and more information. Hope you like it

docs/assets/css/unicado.css

+/* Define color variables in :root for easy reference */
+:root {
+  --primary-color: #2C3E50;      /* Primary color for headers, hero section, and cards */
+  --background-color: #34495E;   /* Background color for main content areas */
+  --text-color: #D1D5DB;         /* Main text color for readability on dark backgrounds */
+  --button-bg-color: #ffffff;    /* Background color for buttons */
+  --accent-color: #E74C3C;       /* Accent color for links and hover effects */
+  --secondary-accent: #1ABC9C;   /* Secondary accent color for icons */
+  --link-color: #3498DB;         /* Link color for clickable items */
+  --link-hover-color: #E74C3C;   /* Hover color for links */
+}
+
+.md-header {
+  background-color: var(--primary-color);
+}
+
+/* Apply primary color to tab backgrounds */
+[data-md-color-scheme=slate] .md-tabs {
+  background-color: var(--primary-color);
+}
+
+/* Hero Section Styling */
+.hero-section {
+  background-color: var(--primary-color);
+  padding: 2em;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  max-width: 1060px;
+  margin: auto;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+}
+
+/* Text styling within the hero section */
+.intro-text {
+  color: var(--text-color);
+  font-size: 1.1em;
+}
+
+/* Download button styling */
+.download-button-container {
+  text-align: center;
+  margin-top: 20px;
+}
+
+.download-button {
+  display: inline-block;
+  background-color: var(--button-bg-color);  /* Uses button background color */
+  padding: 10px 20px;
+  font-size: 1.1em;
+  font-weight: bold;
+  border-radius: 5px;
+  text-decoration: none;
+  color: var(--primary-color); /* Button text color */
+  transition: background-color 0.3s ease;
+}
+
+/* Grid Container */
 .grid-container {
-  grid-gap: .4rem;
   display: grid;
-  grid-template-columns: repeat(auto-fit,minmax(16rem,1fr));
-  margin: 1em 0;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5em;
+  margin: 2em auto;
+  max-width: 1100px;
+  padding: 1em;
 }
 
 .grid-item {
-  border: .05rem solid var(--md-default-fg-color--lightest);
-  border-radius: .1rem;
-  display: block;
-  margin: 0;
-  padding: .8rem;
-  transition: border .25s,box-shadow .25s;
+  background-color: var(--primary-color);   /* Uses primary color for card background */
+  padding: 1.5em;
+  border-radius: 10px;
+  text-align: left;
+  color: var(--text-color);                 /* Text color for readability */
+  transition: transform 0.3s, box-shadow 0.3s;
 }
 
-.grid-item:where(:hover, :focus) {
-  border-color: #0000;
-  box-shadow: var(--md-shadow-z2);
+.grid-item h3 {
+  font-size: 1.25em;
+  margin-bottom: 0.5em;
 }
 
-.overview-item {
-    min-height: 240px;
+/* Card styling with hover effects */
+.card {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.overview-img {
-    width: 200px;
-}
\ No newline at end of file
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
+}
+
+/* Link styling within cards */
+.card a {
+  color: var(--link-color);
+  font-weight: bold;
+}
+
+.card a:hover {
+  color: var(--link-hover-color);  /* Changes to accent color on hover */
+}
+
+/* Accent color for icons or specific elements */
+.accent {
+  color: var(--secondary-accent);  /* Teal accent color for specific elements */
+}
+
+/* Footer Styling */
+.custom-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--primary-color); /* Background color for the footer */
+  color: var(--text-color);
+  padding: 1em 2em; /* Adjust padding for spacing */
+  font-size: 1em; /* Increase text size for better readability */
+  border-top: 1px solid rgba(255, 255, 255, 0.2); /* Subtle top border */
+}
+
+/* Align text and links */
+.footer-content {
+  display: flex;
+  align-items: center;
+  gap: 1em; /* Space between text and impressum link */
+}
+
+.footer-content p {
+  margin: 0; /* Remove extra spacing */
+  font-size: 1.4em; /* Make text slightly larger */
+}
+
+/* Footer link styling */
+.footer-link {
+  color: var(--text-color);
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1.4em;
+  border-bottom: 1px solid transparent;
+  margin-left: 1em; /* Space between copyright and link */
+}
+
+.footer-link:hover {
+  border-bottom: 1px solid var(--accent-color); /* Underline on hover with accent color */
+}
+
+/* Footer image styling */
+.footer-image-container {
+  display: flex;
+  align-items: center;
+}
+
+.footer-image {
+  width: 150px; /* Adjust the width as needed */
+  height: auto;
+  margin-left: 1em; /* Space between image and text */
+  border-radius: 8px; /* Optional: Rounded corners */
+}
+
+
+