ui(tour): permanenter Tour-Link in der Topbar + modernes Button-Styling

User-Feedback: Tour-Start muss auch nach dem ersten Mal möglich sein,
und die Buttons sahen "sehr 90er" aus.

Permanenter Tour-Zugang:
- Topbar-Link "🧭 Tour" neben Methodik/Quellen, sichtbar auf jeder
  Page mit ``window.GWOE_TOUR_STEPS`` (Antrag-Detail + Startseite).
- Per JS in base.html nach DOMContentLoaded sichtbar geschaltet.
- Style: dezente teal-Pille, kein dominanter Button.

Button-Modernisierung:
- ``.v2-chip`` und ``.v3-action-btn`` jetzt pill-shaped (border-radius
  999px statt 3px), mit transition + box-shadow on hover und subtle
  transform on active. Focus-visible mit klarem outline.
- Primary-Variante: teal-solid mit weichem Drop-Shadow, nicht das alte
  dark-Mode-Schwarz.
- Welcome-Banner (Startseite): scharfes ``v2-kasten outline-blue`` weg,
  stattdessen weicher gradient-Hintergrund teal→blue mit border 22%
  teal-Hauch und subtle box-shadow. Skip-Button als Text-Link
  ("Später") statt vollwertiger Chip — visuell klar nachgeordnet.

app/static/v2/v2.css

@@ -360,19 +360,31 @@ body.v2 strong, body.v2 b {
 .v2-chip {
   border: 1px solid var(--hairline);
   background: var(--paper);
-  padding: 5px 11px;
+  padding: 6px 12px;
   font-size: 12px;
   color: var(--ecg-dark);
   font-family: var(--font-sans);
-  font-weight: 400;
+  font-weight: 500;
   cursor: pointer;
   white-space: nowrap;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 999px;          /* pill-style — runde Ecken statt eckig 90er */
+  line-height: 1.2;
+  transition: background 0.15s ease, border-color 0.15s ease,
+              box-shadow 0.15s ease, transform 0.05s ease;
 }
 
 .v2-chip:hover {
-  border-color: var(--ecg-light);
+  border-color: var(--ecg-teal);
   background: var(--surface);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+.v2-chip:active { transform: translateY(1px); }
+.v2-chip:focus-visible {
+  outline: 2px solid var(--ecg-teal);
+  outline-offset: 2px;
 }
 
 .v2-chip.active,
@@ -380,9 +392,45 @@ body.v2 strong, body.v2 b {
   background: var(--ecg-dark);
   color: #fff;
   border-color: var(--ecg-dark);
-  font-weight: 900;
+  font-weight: 700;
 }
 
+/* Primary-Variante: solid teal mit subtle shadow. Für Calls-to-Action
+   wie "Tour starten" — hebt sich klar von neutralen Filter-Chips ab. */
+.v2-chip.primary {
+  background: var(--ecg-teal);
+  color: #fff;
+  border-color: var(--ecg-teal);
+  font-weight: 600;
+  box-shadow: 0 2px 6px rgba(0, 130, 130, 0.18);
+}
+.v2-chip.primary:hover {
+  border-color: var(--ecg-teal);
+  background: color-mix(in srgb, var(--ecg-teal) 88%, #000);
+  box-shadow: 0 3px 10px rgba(0, 130, 130, 0.28);
+}
+
+/* Topbar-Link "🧭 Tour" — visueller Akzent ohne dominanten Button-Look. */
+.v2-topbar-tour {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ecg-teal);
+  background: color-mix(in srgb, var(--ecg-teal) 10%, transparent);
+  padding: 4px 10px;
+  border-radius: 999px;
+  text-decoration: none;
+  transition: background 0.15s ease;
+}
+.v2-topbar-tour:hover {
+  background: color-mix(in srgb, var(--ecg-teal) 18%, transparent);
+}
+.v2-topbar-tour[hidden] { display: none; }
+
 .v2-chip.green.active,
 .v2-chip.green[data-active="true"] {
   background: var(--ecg-green);

app/static/v3/v3.css

@@ -157,24 +157,47 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 5px 12px;
+  padding: 6px 14px;
   border: 1px solid var(--hairline);
-  border-radius: 3px;
+  border-radius: 999px;
   background: var(--paper);
   color: var(--ecg-dark);
   font-family: var(--font-mono);
   font-size: 11px;
+  font-weight: 500;
   cursor: pointer;
   text-decoration: none;
+  transition: background 0.15s ease, border-color 0.15s ease,
+              box-shadow 0.15s ease, transform 0.05s ease;
+}
+.v3-action-btn:hover {
+  border-color: var(--ecg-teal);
+  color: var(--ecg-teal);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+.v3-action-btn:active { transform: translateY(1px); }
+.v3-action-btn:focus-visible {
+  outline: 2px solid var(--ecg-teal);
+  outline-offset: 2px;
+}
+.v3-action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  box-shadow: none;
 }
-.v3-action-btn:hover { border-color: var(--ecg-blue); color: var(--ecg-blue); }
 .v3-action-btn.primary {
-  background: var(--ecg-blue);
+  background: var(--ecg-teal);
   color: #fff;
-  border-color: var(--ecg-blue);
+  border-color: var(--ecg-teal);
-  font-weight: 700;
+  font-weight: 600;
+  box-shadow: 0 2px 6px rgba(0, 130, 130, 0.18);
+}
+.v3-action-btn.primary:hover {
+  background: color-mix(in srgb, var(--ecg-teal) 88%, #000);
+  border-color: color-mix(in srgb, var(--ecg-teal) 88%, #000);
+  color: #fff;
+  box-shadow: 0 3px 10px rgba(0, 130, 130, 0.28);
 }
-.v3-action-btn.primary:hover { background: var(--ecg-dark); border-color: var(--ecg-dark); color: #fff; }
 .v3-action-btn.v3-action-muted { opacity: 0.8; }
 
 /* ── 6. Programm-Treue ─────────────────────────────────────────────── */

app/templates/v2/base.html

@@ -83,6 +83,12 @@
     <span class="v2-topbar-spacer"></span>
     <a href="/methodik">{{ icon("info", 13) }} Methodik</a>
     <a href="/quellen">{{ icon("book-open", 13) }} Quellen</a>
+    {# Tour-Link: nur sichtbar wenn die aktuelle Page Tour-Stationen
+       definiert hat (window.GWOE_TOUR_STEPS). Wird per JS unten ge-toggled. #}
+    <a href="#" id="v2-topbar-tour" class="v2-topbar-tour" hidden
+       onclick="event.preventDefault(); if (window.gwoeTourStart) gwoeTourStart();">
+      🧭 <span>Tour</span>
+    </a>
 
     {# ── Globaler Bundesland-Selector ─────────────────────────────────── #}
     <select id="v2-global-bl"
@@ -323,6 +329,18 @@
 })();
 </script>
 
+<script>
+/* Tour-Link in der Topbar nur einblenden, wenn die aktuelle Page eine
+   Tour definiert hat (window.GWOE_TOUR_STEPS). Wird auf jeder Page mit
+   {% include "v3/components/tour.html" %} sichtbar. */
+document.addEventListener('DOMContentLoaded', function () {
+  var link = document.getElementById('v2-topbar-tour');
+  if (link && Array.isArray(window.GWOE_TOUR_STEPS) && window.GWOE_TOUR_STEPS.length > 0) {
+    link.hidden = false;
+  }
+});
+</script>
+
 {# Feedback/Bug-Report-Widget — öffnet Gitea-Issues direkt aus dem Browser #}
 {% include "v2/components/feedback_widget.html" %}
 

app/templates/v2/screens/durchsuchen.html

@@ -10,18 +10,20 @@
 {% block main %}
 
 {# ── Welcome-Banner: Tour-Einstieg für Erst-Besucher:innen (#185) ── #}
-<div id="gwoe-welcome-banner" class="v2-kasten outline-blue gwoe-welcome-banner" hidden>
+<aside id="gwoe-welcome-banner" class="gwoe-welcome-banner" hidden role="region"
+       aria-label="Willkommen — Tour-Einstieg">
+  <span aria-hidden="true" class="gwoe-welcome-icon">🧭</span>
   <div class="gwoe-welcome-text">
     <strong>Du bist neu hier?</strong>
-    Soll ich dir die Seite erklären? Eine geführte Tour mit Sprachausgabe — du kannst sie jederzeit abbrechen.
+    Soll ich dir die Seite kurz erklären? Geführte Tour mit Sprachausgabe — jederzeit abbrechbar.
   </div>
   <div class="gwoe-welcome-actions">
     <button type="button" onclick="gwoeTourStart()" class="v2-chip primary"
-            id="gwoe-welcome-start">🧭 Tour starten</button>
+            id="gwoe-welcome-start">Tour starten</button>
-    <button type="button" onclick="gwoeWelcomeDismiss()" class="v2-chip"
+    <button type="button" onclick="gwoeWelcomeDismiss()" class="gwoe-welcome-skip"
-            id="gwoe-welcome-dismiss">Nein, danke</button>
+            id="gwoe-welcome-dismiss" aria-label="Banner schließen">Später</button>
-  </div>
   </div>
+</aside>
 
 {# ── Toolbar: Suche ──────────────────────────────────────────────── #}
 {# BL-Filter läuft jetzt über den globalen Selector in der Topbar.     #}
@@ -359,28 +361,58 @@ kbd {
 .gwoe-welcome-banner {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 14px;
   flex-wrap: wrap;
-  margin-bottom: 12px;
+  margin-bottom: 14px;
+  padding: 14px 18px;
+  border-radius: 12px;
+  /* dezent-warmer Hint statt scharfes Outline-Kasten */
+  background: linear-gradient(
+    135deg,
+    color-mix(in srgb, var(--ecg-teal) 6%, var(--surface)) 0%,
+    color-mix(in srgb, var(--ecg-blue) 4%, var(--surface)) 100%
+  );
+  border: 1px solid color-mix(in srgb, var(--ecg-teal) 22%, transparent);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 .gwoe-welcome-banner[hidden] { display: none !important; }
+.gwoe-welcome-icon {
+  font-size: 22px;
+  flex-shrink: 0;
+  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
+}
 .gwoe-welcome-text {
   flex: 1 1 320px;
-  font-size: 13px;
+  font-size: 14px;
-  line-height: 1.5;
+  line-height: 1.55;
   color: var(--ecg-dark);
 }
+.gwoe-welcome-text strong {
+  font-weight: 700;
+  color: var(--ecg-teal);
+}
 .gwoe-welcome-actions {
   display: flex;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
 }
-.v2-chip.primary {
+.gwoe-welcome-skip {
-  background: var(--ecg-teal);
+  background: none;
-  color: #fff;
+  border: none;
-  border-color: var(--ecg-teal);
+  color: var(--ecg-dark);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  letter-spacing: 0.04em;
+  opacity: 0.55;
+  padding: 6px 10px;
+  cursor: pointer;
+  border-radius: 999px;
+  transition: opacity 0.15s ease, background 0.15s ease;
+}
+.gwoe-welcome-skip:hover {
+  opacity: 0.9;
+  background: color-mix(in srgb, var(--ecg-dark) 6%, transparent);
 }
-.v2-chip.primary:hover { opacity: 0.92; }
 </style>
 
 <script>