Web-Install-Hinweis verkleinern, Store-Grafik mit Haus-Motiv

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Web-Install-Hinweis auf der Startseite als dezente Textzeile statt umrahmter Karte mit Emoji und Untertitel
+- Store-/OG-Grafik: Schritt „Denken" zeigt eine Denkblase mit dem Haus-Motiv des App-Icons statt der Mascot-Figur
 - Startseite entschlackt: „Spiel starten" ist die einzige auffällige Aktion (ohne Dauer-Puls); Tägliche Challenge als dezenter Textlink darunter (ohne ⚡, Farbrahmen, Countdown); Level/Galerie/Freies Malen als einfarbige Textlinks im Footer; Statistik als eine Textzeile statt drei Emoji-Karten; Streak-Badge und schwebende Sterne entfernt — die Serie steht nur noch in Malis Begrüßung
 - Merke-Phase: dünner, einfarbiger Restzeit-Balken statt 80px-Countdown-Kreis mit Gelb/Rot-Warnfarben (war bei 3 s Anzeigezeit dauerhaft im Warnmodus)
 - App-Icon/Splash/Store-Grafik: ruhigeres, entsättigtes Hellblau `#A9DCEB` statt `#60D5FA`

components/WebInstallBanner.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Linking } from 'react-native';
+import { Text, StyleSheet, TouchableOpacity, Linking } from 'react-native';
 import { useTranslation } from '@services/i18n';
 import { useTheme } from '@services/ThemeContext';
 import { isWeb } from '../utils/platform';
 import { getPlayStoreUrl } from '../constants/ExternalLinks';
-import { Spacing, FontSize, FontWeight, FontFamily, BorderRadius } from '../constants/Layout';
+import { Spacing, FontSize, FontWeight, FontFamily } from '../constants/Layout';
 
 /**
  * Nur auf Web sichtbarer Install-Hinweis oberhalb des Spiel-CTAs.
@@ -15,6 +15,9 @@ import { Spacing, FontSize, FontWeight, FontFamily, BorderRadius } from '../cons
  * Installationen konvertiert. Dieser Banner macht die Android-App direkt im
  * sichtbaren Bereich zum Angebot — mit Attributions-Link, damit die Installs
  * in der Play Console als Web-Traffic erkennbar sind.
+ *
+ * Bewusst nur eine dezente Textzeile (kein Rahmen, kein Emoji), damit
+ * "Spiel starten" die einzige auffällige Aktion der Startseite bleibt.
  */
 export default function WebInstallBanner() {
   const { t } = useTranslation();
@@ -31,52 +34,25 @@ export default function WebInstallBanner() {
       onPress={open}
       accessibilityRole="link"
       accessibilityLabel={t('webInstall.title')}
-      style={[styles.container, { backgroundColor: colors.surface, borderColor: colors.primary }]}
+      style={styles.container}
     >
-      <Text style={styles.icon}>📲</Text>
-      <View style={styles.textBlock}>
-        <Text style={[styles.title, { color: colors.primary }]} numberOfLines={1}>
-          {t('webInstall.title')}
-        </Text>
-        <Text style={[styles.subtitle, { color: colors.text.secondary }]} numberOfLines={1}>
-          {t('webInstall.subtitle')}
-        </Text>
-      </View>
-      <Text style={[styles.chevron, { color: colors.primary }]}>›</Text>
+      <Text style={[styles.title, { color: colors.primary }]} numberOfLines={1}>
+        {t('webInstall.title')} ›
+      </Text>
     </TouchableOpacity>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: Spacing.sm,
-    marginTop: Spacing.sm,
-    paddingVertical: Spacing.sm,
+    alignSelf: 'center',
+    minHeight: 44,
+    justifyContent: 'center',
     paddingHorizontal: Spacing.md,
-    borderRadius: BorderRadius.lg,
-    borderWidth: 1.5,
-  },
-  icon: {
-    fontSize: 20,
-  },
-  textBlock: {
-    flex: 1,
   },
   title: {
     fontSize: FontSize.sm,
-    fontWeight: FontWeight.bold,
-    fontFamily: FontFamily.bold,
-  },
-  subtitle: {
-    fontSize: FontSize.xs,
-    fontWeight: FontWeight.regular,
-    fontFamily: FontFamily.regular,
-    marginTop: 1,
-  },
-  chevron: {
-    fontSize: 22,
-    fontWeight: FontWeight.bold,
+    fontWeight: FontWeight.semibold,
+    fontFamily: FontFamily.semibold,
   },
 });

components/__tests__/WebInstallBanner.test.tsx

@@ -19,14 +19,12 @@ jest.mock('../../services/ThemeContext', () => ({
 import WebInstallBanner from '../WebInstallBanner';
 
 describe('WebInstallBanner', () => {
-  it('zeigt Titel und Untertitel', () => {
+  it('zeigt nur eine dezente Titelzeile', () => {
     const { UNSAFE_getAllByType } = render(<WebInstallBanner />);
-    const texts = UNSAFE_getAllByType(Text)
-      .map((n: any) => n.props.children)
-      .flat();
+    const texts = UNSAFE_getAllByType(Text);
 
-    expect(texts).toContain('webInstall.title');
-    expect(texts).toContain('webInstall.subtitle');
+    expect(texts).toHaveLength(1);
+    expect(texts[0].props.children).toContain('webInstall.title');
   });
 
   it('öffnet den Play Store mit Banner-Attribution', async () => {

locales/de/translations.json

@@ -23,8 +23,7 @@
     "privacyPolicy": "Datenschutz"
   },
   "webInstall": {
-    "title": "Android-App gratis im Play Store",
-    "subtitle": "Auch ohne Internet spielbar"
+    "title": "Android-App gratis im Play Store"
   },
   "levels": {
     "title": "Level auswählen",

locales/en/translations.json

@@ -23,8 +23,7 @@
     "privacyPolicy": "Privacy Policy"
   },
   "webInstall": {
-    "title": "Free Android app on Google Play",
-    "subtitle": "Plays without an internet connection"
+    "title": "Free Android app on Google Play"
   },
   "levels": {
     "title": "Select Level",

locales/es/translations.json

@@ -23,8 +23,7 @@
     "privacyPolicy": "Política de privacidad"
   },
   "webInstall": {
-    "title": "App de Android gratis en Google Play",
-    "subtitle": "También funciona sin conexión"
+    "title": "App de Android gratis en Google Play"
   },
   "levels": {
     "title": "Elegir nivel",

locales/fr/translations.json

@@ -23,8 +23,7 @@
     "privacyPolicy": "Politique de confidentialité"
   },
   "webInstall": {
-    "title": "Appli Android gratuite sur Google Play",
-    "subtitle": "Fonctionne aussi sans connexion"
+    "title": "Appli Android gratuite sur Google Play"
   },
   "levels": {
     "title": "Choisir un niveau",

locales/it/translations.json

@@ -23,8 +23,7 @@
     "privacyPolicy": "Informativa sulla privacy"
   },
   "webInstall": {
-    "title": "App Android gratuita su Google Play",
-    "subtitle": "Funziona anche senza Internet"
+    "title": "App Android gratuita su Google Play"
   },
   "levels": {
     "title": "Scegli livello",

locales/nl/translations.json

@@ -23,8 +23,7 @@
     "privacyPolicy": "Privacybeleid"
   },
   "webInstall": {
-    "title": "Gratis Android-app in Google Play",
-    "subtitle": "Speelt ook zonder internet"
+    "title": "Gratis Android-app in Google Play"
   },
   "levels": {
     "title": "Level kiezen",

locales/pl/translations.json

@@ -23,8 +23,7 @@
     "privacyPolicy": "Polityka prywatności"
   },
   "webInstall": {
-    "title": "Darmowa aplikacja na Androida w Google Play",
-    "subtitle": "Działa też bez internetu"
+    "title": "Darmowa aplikacja na Androida w Google Play"
   },
   "levels": {
     "title": "Wybierz poziom",