From e464a4160defa93bce1b94e23529998b8c002cab Mon Sep 17 00:00:00 2001
From: Kerim Atilgan <kerim@familie-atilgan.de>
Date: Fri, 15 May 2026 17:48:04 +0200
Subject: [PATCH] Fix Stitch redesign: border defaults, tab underline, 3-col
 carrier grid

Three small but visible regressions in the previous step:

1. Tailwind's "border" utility only sets the width; with preflight
   disabled the style fell back to the browser default (none), so the
   carrier cards in step 1 rendered without any visible outline. Add a
   minimal *,::before,::after rule that restores border-style: solid
   and a sensible default border-color, mirroring the relevant slice
   of preflight without breaking legacy screens.

2. The active tab underline was a mix of Tailwind border-b-2 utility
   classes on the button and a CSS border-bottom override. Because the
   button used flex items-center inside an li, the underline floated
   somewhere in the middle of the header instead of hugging the bottom.
   Drop the Tailwind border-* classes and switch to a single inset
   box-shadow at the bottom of the button, which always anchors to the
   header's lower edge regardless of padding.

3. The carrier grid was 4 columns on lg, which made 6 providers wrap
   awkwardly. Match the Stitch mockup: 2 cols on small screens, 3 on
   lg. Card corner radius shrunk from rounded-lg back to rounded (4px)
   to match the Stitch tool-style aesthetic.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 public/index.html | 55 +++++++++++++++++++++++++----------------------
 public/script.js  |  2 +-
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/public/index.html b/public/index.html
index 6f5dee8..92401ec 100644
--- a/public/index.html
+++ b/public/index.html
@@ -86,6 +86,12 @@
         .material-symbols-outlined {
             font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
         }
+        /* Tailwind preflight is disabled to keep legacy screens working;
+           manually restore the border defaults Tailwind utilities expect. */
+        *, ::before, ::after {
+            border-color: #c3c6d7;
+            border-style: solid;
+        }
     </style>
 
     <style>
@@ -120,19 +126,28 @@
             display: block;
         }
 
-        /* Nav-tab active state — paired with the Tailwind classes on the
-           inactive baseline. Override colour + bottom border for active tab. */
+        /* Nav-tab states. The active tab gets a 2px underline anchored to
+           the bottom edge of the dark header via inset box-shadow. */
         header .nav-tab {
+            display: flex;
+            align-items: center;
+            height: 100%;
+            padding: 0 8px;
             background: transparent;
             border: none;
             cursor: pointer;
-            padding: 0 8px;
             font-family: inherit;
+            font-size: 14px;
+            line-height: 20px;
+            color: #c3c6d7;
+            transition: color 0.15s, box-shadow 0.15s;
+        }
+        header .nav-tab:hover {
+            color: #eaf1ff;
         }
         header .nav-tab.active {
-            color: #eaf1ff !important;
-            border-bottom: 2px solid #b4c5ff !important;
-            padding-top: 2px;
+            color: #eaf1ff;
+            box-shadow: inset 0 -2px 0 0 #b4c5ff;
         }
         
         .form-group {
@@ -969,26 +984,14 @@
                 <span class="material-symbols-outlined text-inverse-on-surface">monitoring</span>
                 <span class="text-title-sm font-semibold text-inverse-on-surface">Provisions-Tracker</span>
             </div>
-            <nav class="hidden md:flex items-end h-full">
+            <nav class="hidden md:flex items-stretch h-full">
                 <ul class="flex gap-lg h-full">
-                    <li class="h-full flex items-center">
-                        <button class="nav-tab active h-full flex items-center px-sm text-body-md text-inverse-on-surface border-b-2 border-primary-fixed-dim pt-[2px] transition-colors" onclick="showTab('schaltung')">Schaltung erfassen</button>
-                    </li>
-                    <li class="h-full flex items-center">
-                        <button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('overview')">Übersicht</button>
-                    </li>
-                    <li class="h-full flex items-center">
-                        <button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('provisionen')">Provisionen</button>
-                    </li>
-                    <li class="h-full flex items-center">
-                        <button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('geloeschte')">Gelöschte Schaltungen</button>
-                    </li>
-                    <li class="h-full flex items-center">
-                        <button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('admin')">Administration</button>
-                    </li>
-                    <li class="h-full flex items-center admin-only" style="display:none">
-                        <button class="nav-tab h-full flex items-center px-sm text-body-md text-on-surface-variant hover:text-inverse-on-surface transition-colors" onclick="showTab('users')">Benutzer</button>
-                    </li>
+                    <li class="h-full flex"><button class="nav-tab active" onclick="showTab('schaltung')">Schaltung erfassen</button></li>
+                    <li class="h-full flex"><button class="nav-tab" onclick="showTab('overview')">Übersicht</button></li>
+                    <li class="h-full flex"><button class="nav-tab" onclick="showTab('provisionen')">Provisionen</button></li>
+                    <li class="h-full flex"><button class="nav-tab" onclick="showTab('geloeschte')">Gelöschte Schaltungen</button></li>
+                    <li class="h-full flex"><button class="nav-tab" onclick="showTab('admin')">Administration</button></li>
+                    <li class="h-full flex admin-only" style="display:none"><button class="nav-tab" onclick="showTab('users')">Benutzer</button></li>
                 </ul>
             </nav>
             <div class="flex items-center gap-md">
@@ -1013,7 +1016,7 @@
                     <h1 class="text-headline-md text-on-surface mb-xs">Neue Schaltung</h1>
                     <p class="text-body-sm text-on-surface-variant">Schritt 1 von 2: Anbieter wählen</p>
                 </div>
-                <div id="wizardAnbieterButtons" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-md"></div>
+                <div id="wizardAnbieterButtons" class="grid grid-cols-2 lg:grid-cols-3 gap-md"></div>
             </div>
 
             <!-- Step 2: VO + Tarif + Tarifoptionen + Kundendaten -->
diff --git a/public/script.js b/public/script.js
index 8ea7d8c..a8ea70d 100644
--- a/public/script.js
+++ b/public/script.js
@@ -65,7 +65,7 @@ async function renderWizardAnbieterButtons() {
         anbieter.forEach(a => {
             const btn = document.createElement('button');
             btn.type = 'button';
-            btn.className = 'group flex flex-col items-center justify-center p-lg border border-outline-variant rounded-lg bg-surface-container-lowest hover:-translate-y-1 hover:shadow-sm hover:border-primary transition-all duration-200 h-32';
+            btn.className = 'group flex flex-col items-center justify-center p-lg border border-outline-variant rounded bg-surface-container-lowest hover:-translate-y-1 hover:shadow-sm hover:border-primary transition-all duration-200 h-32';
             btn.innerHTML = `
                 <span class="material-symbols-outlined text-4xl text-on-surface-variant group-hover:text-primary mb-sm" style="font-variation-settings: 'FILL' 1;">cell_tower</span>
                 <span class="text-title-sm text-on-surface"></span>