diff --git a/app/static/v2/v2.css b/app/static/v2/v2.css index 97e95dd..4cbf2b2 100644 --- a/app/static/v2/v2.css +++ b/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); diff --git a/app/static/v3/v3.css b/app/static/v3/v3.css index 64ef497..1dde74a 100644 --- a/app/static/v3/v3.css +++ b/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); - font-weight: 700; + border-color: var(--ecg-teal); + 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 ─────────────────────────────────────────────── */ diff --git a/app/templates/v2/base.html b/app/templates/v2/base.html index bb832b5..5cca1b8 100644 --- a/app/templates/v2/base.html +++ b/app/templates/v2/base.html @@ -83,6 +83,12 @@ {{ icon("info", 13) }} Methodik {{ icon("book-open", 13) }} Quellen + {# Tour-Link: nur sichtbar wenn die aktuelle Page Tour-Stationen + definiert hat (window.GWOE_TOUR_STEPS). Wird per JS unten ge-toggled. #} + {# ── Globaler Bundesland-Selector ─────────────────────────────────── #}