Light Mode: Kontrast-Fixes für Hero + Locations

User meldete schlechte Lesbarkeit im Light Mode. Probleme:

1. Hero-H1 Gradient (Gold→Weiß→Bordeaux) verschwand auf
   cremefarbenem Light-Background. Fix: Light-Mode-Override mit
   kräftigem Bordeaux→Dunkelrot Gradient (#8b1538 → #4a0e1a),
   ohne Text-Shadow.

2. Hero-Untertitel '.where' (Gold-Akzent) auf hellem BG zu blass.
   Fix: Light-Mode-Override mit Bordeaux.

3. Section-Titel-Akzentbalken (Gold→transparent) unsichtbar auf
   hellem BG. Fix: Light-Mode-Override mit Akzent→bg-3 Gradient
   + Opacity 0.7.

4. Location-Card Kategorie-Tags (Akzentfarbe auf hellem BG)
   teils grenzwertig. Fix: font-weight 700→800 + Light-Mode-Override
   mit color-mix 80% cat-color + 20% dunkelbraun für mehr Tiefe.

Visuell verifiziert per Browser-Snapshot im Light Mode.
This commit is contained in:
Hermes AI Bot
2026-06-27 09:35:15 +00:00
parent 5d48ae221d
commit 1a7f920515
+19 -1
View File
@@ -196,6 +196,13 @@
text-shadow: 0 0 40px rgba(212,160,23,0.3);
line-height: 1;
}
[data-theme="light"] .hero h1 {
background: linear-gradient(135deg, var(--bordeaux) 0%, #4a0e1a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
}
.hero .sub {
font-size: clamp(16px, 2.2vw, 22px);
color: var(--text-strong);
@@ -209,6 +216,9 @@
margin: 8px 0 16px;
font-weight: 700;
}
[data-theme="light"] .hero .where {
color: var(--bordeaux);
}
.hero-meta {
display: inline-flex;
flex-wrap: wrap;
@@ -249,6 +259,10 @@
background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
border-radius: 1px;
}
[data-theme="light"] .section-title .bar {
background: linear-gradient(90deg, var(--accent) 0%, var(--bg-3) 80%);
opacity: 0.7;
}
.section-subtitle {
color: var(--text-muted);
font-size: 14px;
@@ -435,9 +449,13 @@
color: var(--cat-color);
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
font-weight: 800;
margin-top: 1px;
}
[data-theme="light"] .loc-card .meta {
/* Dunklere Variante der Akzentfarbe für besseren Kontrast auf hellem Card-Hintergrund */
color: color-mix(in srgb, var(--cat-color) 80%, #1a0e0a);
}
.loc-card .addr {
font-size: 13px;
color: var(--text-muted);