App-Design wie die Webseite: Papier, Tinte, Amtsblau, Textmarker, Georgia

- theme.ts nimmt die Werte der Webseite (--papier, --tinte, --amtsblau,
  --marker, --stempelrot) statt Gold/Bronze; neue Bausteine schriftart
  (Georgia / Courier), ecke, kartenSchatten, formularRahmen, etikett
- alle Texte in Georgia, Versal-Etiketten in Schreibmaschinenschrift (grau
  wie "BETREFF"), Karten als Papierblaetter mit feiner Linie + flachem Schatten
- Knoepfe wie .cta: Amtsblau bzw. weisses Blatt, Tinten-Rahmen, harter
  Versatz-Schatten, beim Druecken rutscht der Knopf in den Schatten
- Startseite: Briefkopf "BehoerdenKlar by Webklar" mit Tinten-Linie,
  Textmarker auf "Fristen", dringendste Frist als Formular
- Tab-Leiste: Papier mit Tinten-Linie, Scan-Knopf mit hartem Schatten

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/Ampel.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { AmpelStatus } from '../utils/ampel';
-import { abstand, schrift } from '../theme';
+import { abstand, schrift, schriftart, ecke } from '../theme';
 import { Ikone, IkonenName } from './Ikone';
 
 const IKONE: Record<string, IkonenName> = { rot: 'warnung', gelb: 'wecker', gruen: 'info' };
@@ -28,9 +28,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     borderLeftWidth: 6,
-    borderRadius: 12,
+    borderRadius: ecke,
     padding: abstand.m,
     gap: abstand.s,
   },
-  text: { flex: 1, fontSize: schrift.gross, fontWeight: '700' },
+  text: { fontFamily: schriftart.serif, flex: 1, fontSize: schrift.gross, fontWeight: '700' },
 });

src/components/AppSchutz.tsx

@@ -14,7 +14,7 @@ import { AppState, AppStateStatus, StyleSheet, Text, View } from 'react-native';
 import * as LocalAuthentication from 'expo-local-authentication';
 import { holeAppSperre } from '../services/storage';
 import { GrossButton } from './GrossButton';
-import { farben, schrift, abstand } from '../theme';
+import { farben, schrift, abstand, schriftart } from '../theme';
 
 export function AppSchutz({ children }: { children: React.ReactNode }) {
   const [entsperrt, setEntsperrt] = useState(false);
@@ -97,14 +97,14 @@ const styles = StyleSheet.create({
     gap: abstand.m,
   },
   sichtschutz: { justifyContent: 'center', alignItems: 'center' },
-  symbol: { fontSize: 56, textAlign: 'center' },
-  titel: {
+  symbol: { fontFamily: schriftart.serif, fontSize: 56, textAlign: 'center' },
+  titel: { fontFamily: schriftart.serif,
     fontSize: schrift.titel,
     fontWeight: '700',
     color: farben.text,
     textAlign: 'center',
   },
-  text: {
+  text: { fontFamily: schriftart.serif,
     fontSize: schrift.basis,
     color: farben.textSekundaer,
     textAlign: 'center',

src/components/GrossButton.tsx

@@ -8,7 +8,7 @@
  */
 import React from 'react';
 import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
-import { farben, schrift, abstand, TOUCH_TARGET } from '../theme';
+import { farben, schrift, abstand, TOUCH_TARGET, schriftart, ecke } from '../theme';
 import { Ikone, IkonenName } from './Ikone';
 
 interface Props {
@@ -30,8 +30,8 @@ export function GrossButton({
 }: Props) {
   const istPrimaer = variante === 'primaer';
   const istGefahr = variante === 'gefahr';
-  // Sekundär: dunkles Bronze statt hellem Gold — auf grauer Fläche gut lesbar
-  const inhaltsFarbe = istPrimaer || istGefahr ? farben.primaerText : farben.primaerFuellung;
+  // Wie `.cta` der Webseite: Amtsblau gefüllt bzw. weißes Blatt mit blauer Schrift
+  const inhaltsFarbe = istPrimaer ? farben.primaerText : istGefahr ? farben.fehler : farben.primaer;
   return (
     <Pressable
       onPress={onPress}
@@ -44,7 +44,7 @@ export function GrossButton({
         variante === 'sekundaer' && styles.sekundaer,
         istGefahr && styles.gefahr,
         (deaktiviert || laedt) && styles.deaktiviert,
-        pressed && styles.gedrueckt,
+        pressed && !(deaktiviert || laedt) && styles.gedrueckt,
       ]}
     >
       {laedt ? (
@@ -62,17 +62,19 @@ export function GrossButton({
 const styles = StyleSheet.create({
   button: {
     minHeight: TOUCH_TARGET,
-    borderRadius: 14,
+    borderRadius: ecke,
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: abstand.l,
     paddingVertical: abstand.s,
   },
   zeile: { flexDirection: 'row', alignItems: 'center', gap: abstand.xs + 2 },
-  primaer: { backgroundColor: farben.primaerFuellung },
-  sekundaer: { backgroundColor: farben.flaecheSekundaer },
-  gefahr: { backgroundColor: farben.fehler },
-  deaktiviert: { opacity: 0.4 },
-  gedrueckt: { opacity: 0.65 },
-  text: { fontSize: schrift.gross, fontWeight: '600', textAlign: 'center' },
+  // Tinten-Rahmen + harter Versatz-Schatten wie `.cta` auf der Webseite;
+  // beim Drücken rutscht der Knopf in den Schatten (wie dort beim Hover)
+  primaer: { backgroundColor: farben.primaerFuellung, borderWidth: 2, borderColor: farben.tinte, boxShadow: '4px 4px 0px #21211D' },
+  sekundaer: { backgroundColor: farben.flaeche, borderWidth: 2, borderColor: farben.tinte, boxShadow: '4px 4px 0px #21211D' },
+  gefahr: { backgroundColor: farben.flaeche, borderWidth: 2, borderColor: farben.fehler },
+  deaktiviert: { opacity: 0.4, boxShadow: 'none' },
+  gedrueckt: { transform: [{ translateX: 2 }, { translateY: 2 }], boxShadow: '2px 2px 0px #21211D' },
+  text: { fontFamily: schriftart.serif, fontSize: schrift.gross, fontWeight: '700', textAlign: 'center' },
 });