From 0f35698eb8a350bac96ae76f5189cea84b7853cd Mon Sep 17 00:00:00 2001
From: Kroonk <Tom.misch2@gmail.com>
Date: Mon, 13 Apr 2026 21:34:43 +0200
Subject: [PATCH] Add auth.mischlabs.de as wide banner card above service grid

Horizontal banner layout with shield icon, spanning full grid width.
Responsive: collapses to vertical on mobile.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 index.html | 14 ++++++++++++++
 style.css  | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/index.html b/index.html
index 8869c04..f380de3 100644
--- a/index.html
+++ b/index.html
@@ -22,6 +22,20 @@
     </header>
 
     <main>
+        <a href="https://auth.mischlabs.de" class="card card-banner" target="_blank" rel="noopener">
+            <div class="card-icon" style="--accent: #f59e0b;">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+                    <path d="M9 12l2 2 4-4"/>
+                </svg>
+            </div>
+            <div class="card-content">
+                <h2>Single Sign-On</h2>
+                <p>Zentrales Login fuer alle Dienste</p>
+            </div>
+            <span class="card-domain">auth.mischlabs.de</span>
+        </a>
+
         <div class="grid">
 
             <a href="https://drive.mischlabs.de" class="card" target="_blank" rel="noopener">
diff --git a/style.css b/style.css
index ad60028..2a7133d 100644
--- a/style.css
+++ b/style.css
@@ -126,6 +126,27 @@ main {
     gap: 1.25rem;
 }
 
+/* ===== Banner Card (Auth) ===== */
+.card-banner {
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1.5rem;
+    margin-bottom: 1.25rem;
+    animation: fadeInUp 0.5s ease backwards;
+}
+
+.card-banner .card-content {
+    flex: 1;
+}
+
+.card-banner .card-domain {
+    border-top: none;
+    padding-top: 0;
+    border-left: 1px solid var(--border);
+    padding-left: 1rem;
+}
+
 /* ===== Card ===== */
 .card {
     display: flex;
@@ -265,9 +286,24 @@ footer p {
         width: 20px;
         height: 20px;
     }
+
+    .card-banner {
+        margin-bottom: 0.75rem;
+    }
 }
 
 @media (max-width: 480px) {
+    .card-banner {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .card-banner .card-domain {
+        border-left: none;
+        padding-left: 0;
+        border-top: 1px solid var(--border);
+        padding-top: 0.5rem;
+    }
     .grid {
         grid-template-columns: 1fr;
     }