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/screens/AnalyseScreen.tsx

@@ -24,7 +24,7 @@ import { terminZumKalender } from '../services/kalender';
 import { berechneAmpel, naechsteFrist, formatiereLangDatum } from '../utils/ampel';
 import { GrossButton } from '../components/GrossButton';
 import { Ikone } from '../components/Ikone';
-import { farben, schrift, abstand, TOUCH_TARGET } from '../theme';
+import { farben, schrift, abstand, TOUCH_TARGET, schriftart, ecke, kartenSchatten } from '../theme';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Analyse'>;
 
@@ -343,66 +343,66 @@ const styles = StyleSheet.create({
   zentriert: { flex: 1, justifyContent: 'center', alignItems: 'center' },
 
   // Frist-Karte
-  fristKarte: { borderRadius: 16, borderWidth: 1, padding: abstand.l },
+  fristKarte: { borderRadius: ecke, borderWidth: 1, padding: abstand.l },
   fristKopf: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 10 },
-  fristKicker: { fontSize: 12, letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: '700' },
-  grosseZahl: { fontSize: 64, lineHeight: 64, fontWeight: '800', fontVariant: ['tabular-nums'] },
-  zahlEinheit: { fontSize: 22, fontWeight: '700', lineHeight: 24 },
-  zahlUnter: { fontSize: 13, color: farben.textSekundaer },
+  fristKicker: { fontFamily: schriftart.mono, fontSize: 12, letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: '700' },
+  grosseZahl: { fontFamily: schriftart.serif, fontSize: 64, lineHeight: 64, fontWeight: '800', fontVariant: ['tabular-nums'] },
+  zahlEinheit: { fontFamily: schriftart.serif, fontSize: 22, fontWeight: '700', lineHeight: 24 },
+  zahlUnter: { fontFamily: schriftart.serif, fontSize: 13, color: farben.textSekundaer },
   trenner: { height: 1, backgroundColor: farben.rand, marginVertical: 14 },
   datenZeile: { flexDirection: 'row', justifyContent: 'space-between', gap: 12, marginTop: 5 },
-  datenLabel: { fontSize: schrift.klein, color: farben.textSekundaer },
-  datenWert: { fontSize: schrift.klein, fontWeight: '700', color: farben.text },
+  datenLabel: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer },
+  datenWert: { fontFamily: schriftart.serif, fontSize: schrift.klein, fontWeight: '700', color: farben.text },
 
   keineFrist: {
     flexDirection: 'row', gap: abstand.s, alignItems: 'center',
-    backgroundColor: farben.ampelGruenHintergrund, borderRadius: 12,
+    backgroundColor: farben.ampelGruenHintergrund, borderRadius: ecke,
     borderLeftWidth: 4, borderLeftColor: farben.ampelGruen, padding: abstand.m,
   },
-  keineFristTitel: { fontSize: schrift.basis, fontWeight: '700', color: farben.text },
-  keineFristText: { fontSize: schrift.klein, color: farben.textSekundaer, marginTop: 2 },
+  keineFristTitel: { fontFamily: schriftart.serif, fontSize: schrift.basis, fontWeight: '700', color: farben.text },
+  keineFristText: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, marginTop: 2 },
 
   // Werkzeuge
   werkzeugZeile: { flexDirection: 'row', gap: abstand.s, marginTop: abstand.m },
-  werkzeug: {
+  werkzeug: { ...kartenSchatten,
     flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 7,
-    backgroundColor: farben.flaeche, borderRadius: 12, minHeight: 48, paddingHorizontal: abstand.s,
+    backgroundColor: farben.flaeche, borderRadius: ecke, minHeight: 48, paddingHorizontal: abstand.s,
   },
-  werkzeugText: { fontSize: schrift.klein, fontWeight: '600', color: farben.primaerFuellung },
+  werkzeugText: { fontFamily: schriftart.serif, fontSize: schrift.klein, fontWeight: '600', color: farben.primaerFuellung },
 
-  kicker: {
+  kicker: { fontFamily: schriftart.mono,
     fontSize: 12, letterSpacing: 1.1, textTransform: 'uppercase',
-    color: farben.primaer, fontWeight: '700', marginTop: abstand.l, marginBottom: abstand.xs,
+    color: farben.textSekundaer, fontWeight: '700', marginTop: abstand.l, marginBottom: abstand.xs,
   },
-  kernaussage: { fontSize: schrift.gross, color: farben.text, lineHeight: 29, fontWeight: '600' },
-  erklaerung: { fontSize: schrift.basis, color: farben.textSekundaer, lineHeight: 27, marginTop: abstand.s },
+  kernaussage: { fontFamily: schriftart.serif, fontSize: schrift.gross, color: farben.text, lineHeight: 29, fontWeight: '600' },
+  erklaerung: { fontFamily: schriftart.serif, fontSize: schrift.basis, color: farben.textSekundaer, lineHeight: 27, marginTop: abstand.s },
   dünnerTrenner: { height: 1, backgroundColor: farben.rand, marginTop: abstand.l },
 
   // To-do
   todoZeile: { flexDirection: 'row', gap: abstand.s, alignItems: 'flex-start', minHeight: 40 },
   todoKreis: {
-    width: 28, height: 28, borderRadius: 14, borderWidth: 1.5, borderColor: farben.primaer,
+    width: 28, height: 28, borderRadius: ecke, borderWidth: 1.5, borderColor: farben.primaer,
     alignItems: 'center', justifyContent: 'center', marginTop: 1,
   },
   todoKreisFertig: { backgroundColor: farben.ampelGruen, borderColor: farben.ampelGruen },
-  todoNummer: { fontSize: schrift.klein, fontWeight: '700', color: farben.primaerFuellung, fontVariant: ['tabular-nums'] },
-  todoText: { flex: 1, fontSize: schrift.basis, color: farben.text, lineHeight: 25, paddingTop: 3 },
+  todoNummer: { fontFamily: schriftart.serif, fontSize: schrift.klein, fontWeight: '700', color: farben.primaerFuellung, fontVariant: ['tabular-nums'] },
+  todoText: { fontFamily: schriftart.serif, flex: 1, fontSize: schrift.basis, color: farben.text, lineHeight: 25, paddingTop: 3 },
   durchgestrichen: { textDecorationLine: 'line-through', color: farben.textSekundaer },
 
   // Fachbegriffe
-  begriffKarte: { backgroundColor: farben.flaeche, borderRadius: 12, padding: abstand.m },
-  begriff: { fontSize: schrift.basis, fontWeight: '700', color: farben.text, marginBottom: 3 },
-  begriffText: { fontSize: schrift.klein, color: farben.textSekundaer, lineHeight: 23 },
+  begriffKarte: { ...kartenSchatten, backgroundColor: farben.flaeche, borderRadius: ecke, padding: abstand.m },
+  begriff: { fontFamily: schriftart.serif, fontSize: schrift.basis, fontWeight: '700', color: farben.text, marginBottom: 3 },
+  begriffText: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, lineHeight: 23 },
 
   schutzZeile: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: abstand.l },
-  schutzText: { fontSize: 11.5, color: farben.textTertiaer },
+  schutzText: { fontFamily: schriftart.serif, fontSize: 11.5, color: farben.textTertiaer },
 
-  text: { fontSize: schrift.basis, color: farben.text, lineHeight: 27 },
+  text: { fontFamily: schriftart.serif, fontSize: schrift.basis, color: farben.text, lineHeight: 27 },
 
   // Modal
   modalHintergrund: { flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'center', padding: abstand.l },
-  modalKarte: { backgroundColor: farben.flaeche, borderRadius: 14, padding: abstand.m, maxHeight: '75%' },
-  modalTitel: { fontSize: schrift.gross, fontWeight: '700', color: farben.text, marginBottom: abstand.xs },
+  modalKarte: { ...kartenSchatten, backgroundColor: farben.flaeche, borderRadius: ecke, padding: abstand.m, maxHeight: '75%' },
+  modalTitel: { fontFamily: schriftart.serif, fontSize: schrift.gross, fontWeight: '700', color: farben.text, marginBottom: abstand.xs },
   sprachZeile: { minHeight: TOUCH_TARGET, justifyContent: 'center' },
-  sprachZeileText: { fontSize: schrift.gross, color: farben.text },
+  sprachZeileText: { fontFamily: schriftart.serif, fontSize: schrift.gross, color: farben.text },
 });

src/screens/AntwortScreen.tsx

@@ -26,7 +26,7 @@ import { generiereAntwort } from '../services/antwort';
 import { ClaudeFehler } from '../services/claudeClient';
 import { GrossButton } from '../components/GrossButton';
 import { Ikone, IkonenName } from '../components/Ikone';
-import { farben, schrift, abstand } from '../theme';
+import { farben, schrift, abstand, schriftart, ecke, kartenSchatten } from '../theme';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Antwort'>;
 
@@ -258,28 +258,28 @@ function escapeHtml(s: string): string {
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: farben.hintergrund },
   zentriert: { flex: 1, justifyContent: 'center', alignItems: 'center' },
-  text: { fontSize: schrift.basis, color: farben.text },
+  text: { fontFamily: schriftart.serif, fontSize: schrift.basis, color: farben.text },
 
-  schrittLabel: { fontSize: schrift.klein, color: farben.textSekundaer, fontWeight: '600', marginBottom: abstand.xs },
+  schrittLabel: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, fontWeight: '600', marginBottom: abstand.xs },
   fortschritt: { flexDirection: 'row', gap: 6, marginBottom: abstand.l },
   balken: { flex: 1, height: 5, borderRadius: 3 },
 
-  titel: { fontSize: schrift.titel, fontWeight: '800', color: farben.text, marginBottom: 4 },
-  unterTitel: { fontSize: schrift.klein, color: farben.textSekundaer, lineHeight: 22, marginBottom: abstand.s },
+  titel: { fontFamily: schriftart.serif, fontSize: schrift.titel, fontWeight: '800', color: farben.text, marginBottom: 4 },
+  unterTitel: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, lineHeight: 22, marginBottom: abstand.s },
 
   // Schritt 1 — Karten
-  typKarte: {
+  typKarte: { ...kartenSchatten,
     flexDirection: 'row', alignItems: 'center', gap: abstand.s,
-    backgroundColor: farben.flaeche, borderRadius: 14, padding: abstand.m,
+    backgroundColor: farben.flaeche, borderRadius: ecke, padding: abstand.m,
   },
   typIkone: {
-    width: 44, height: 44, borderRadius: 12, borderWidth: 1, borderColor: farben.primaer,
+    width: 44, height: 44, borderRadius: ecke, borderWidth: 1, borderColor: farben.primaer,
     alignItems: 'center', justifyContent: 'center', flexShrink: 0,
   },
-  typTitel: { fontSize: schrift.basis, fontWeight: '700', color: farben.text },
-  typBeschreibung: { fontSize: schrift.klein, color: farben.textSekundaer, marginTop: 2, lineHeight: 20 },
+  typTitel: { fontFamily: schriftart.serif, fontSize: schrift.basis, fontWeight: '700', color: farben.text },
+  typBeschreibung: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, marginTop: 2, lineHeight: 20 },
   empfohlenTag: { backgroundColor: farben.hervorhebung, borderRadius: 6, paddingHorizontal: 8, paddingVertical: 2 },
-  empfohlenText: { fontSize: 11, fontWeight: '700', color: farben.primaerFuellung },
+  empfohlenText: { fontFamily: schriftart.serif, fontSize: 11, fontWeight: '700', color: farben.primaerFuellung },
 
   // Schritt 2/3
   wahlPill: {
@@ -287,19 +287,19 @@ const styles = StyleSheet.create({
     borderWidth: 1, borderColor: farben.primaer, borderRadius: 9999,
     paddingHorizontal: 12, paddingVertical: 6, marginBottom: abstand.m,
   },
-  wahlPillText: { fontSize: schrift.klein, color: farben.primaerFuellung, fontWeight: '600' },
-  feldLabel: { fontSize: schrift.klein, color: farben.textSekundaer, fontWeight: '600', marginTop: abstand.s, marginBottom: 6 },
-  eingabe: {
-    borderWidth: 1, borderColor: farben.rand, borderRadius: 12, padding: abstand.s,
+  wahlPillText: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.primaerFuellung, fontWeight: '600' },
+  feldLabel: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, fontWeight: '600', marginTop: abstand.s, marginBottom: 6 },
+  eingabe: { fontFamily: schriftart.serif,
+    borderWidth: 1, borderColor: farben.rand, borderRadius: ecke, padding: abstand.s,
     fontSize: schrift.basis, color: farben.text, backgroundColor: farben.flaeche, minHeight: 52,
   },
   mehrzeilig: { minHeight: 110 },
   briefText: { minHeight: 300, lineHeight: 26 },
   infoBox: {
     flexDirection: 'row', gap: abstand.s, alignItems: 'flex-start',
-    backgroundColor: farben.hervorhebung, borderRadius: 12, padding: abstand.m, marginTop: abstand.m,
+    backgroundColor: farben.hervorhebung, borderRadius: ecke, padding: abstand.m, marginTop: abstand.m,
   },
-  infoBoxText: { flex: 1, fontSize: schrift.klein, color: farben.text, lineHeight: 21 },
+  infoBoxText: { fontFamily: schriftart.serif, flex: 1, fontSize: schrift.klein, color: farben.text, lineHeight: 21 },
   zurueck: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: abstand.m, paddingVertical: abstand.s },
-  zurueckText: { fontSize: schrift.klein, color: farben.primaerFuellung, fontWeight: '600' },
+  zurueckText: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.primaerFuellung, fontWeight: '600' },
 });

src/screens/ArchivScreen.tsx

@@ -13,7 +13,7 @@ import { berechneAmpel } from '../utils/ampel';
 import { formatiereDatum } from '../services/erinnerungen';
 import { Ikone } from '../components/Ikone';
 import { GrossButton } from '../components/GrossButton';
-import { farben, schrift, abstand, TOUCH_TARGET } from '../theme';
+import { farben, schrift, abstand, TOUCH_TARGET, schriftart, ecke, kartenSchatten } from '../theme';
 
 type Nav = NativeStackNavigationProp<RootStackParamList>;
 
@@ -161,39 +161,39 @@ export function ArchivScreen() {
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: farben.hintergrund },
-  kicker: {
+  kicker: { fontFamily: schriftart.mono,
     fontSize: 12, letterSpacing: 1.3, textTransform: 'uppercase',
-    color: farben.primaer, fontWeight: '600', marginBottom: 4,
+    color: farben.textSekundaer, fontWeight: '600', marginBottom: 4,
   },
-  titel: { fontSize: schrift.riesig, fontWeight: '800', color: farben.text, marginBottom: abstand.m },
-  sucheBox: {
+  titel: { fontFamily: schriftart.serif, fontSize: schrift.riesig, fontWeight: '800', color: farben.text, marginBottom: abstand.m },
+  sucheBox: { ...kartenSchatten,
     flexDirection: 'row', alignItems: 'center', gap: 8,
-    backgroundColor: farben.flaeche, borderRadius: 12,
+    backgroundColor: farben.flaeche, borderRadius: ecke,
     paddingHorizontal: abstand.s, marginBottom: abstand.s, minHeight: 48,
   },
-  sucheFeld: { flex: 1, fontSize: schrift.basis, color: farben.text, paddingVertical: abstand.s },
+  sucheFeld: { fontFamily: schriftart.serif, flex: 1, fontSize: schrift.basis, color: farben.text, paddingVertical: abstand.s },
   chip: {
     borderRadius: 9999, borderWidth: 1, borderColor: farben.rand,
     backgroundColor: farben.flaeche, paddingHorizontal: 14, paddingVertical: 8,
   },
   chipAktiv: { borderColor: farben.primaer, backgroundColor: farben.hervorhebung },
-  chipText: { fontSize: schrift.klein, color: farben.textSekundaer },
+  chipText: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer },
   chipTextAktiv: { color: farben.primaer, fontWeight: '600' },
-  zahlZeile: {
+  zahlZeile: { fontFamily: schriftart.mono,
     fontSize: 12, letterSpacing: 1, textTransform: 'uppercase',
     color: farben.textTertiaer, marginBottom: abstand.s,
   },
-  zeile: {
+  zeile: { ...kartenSchatten,
     flexDirection: 'row', alignItems: 'center', gap: abstand.s,
-    backgroundColor: farben.flaeche, borderRadius: 12,
+    backgroundColor: farben.flaeche, borderRadius: ecke,
     padding: abstand.m, marginBottom: abstand.s, minHeight: TOUCH_TARGET,
   },
   punkt: { width: 10, height: 10, borderRadius: 5 },
-  zeileTyp: { flex: 1, fontSize: schrift.basis, fontWeight: '700', color: farben.text },
-  datum: { fontSize: schrift.klein, color: farben.textTertiaer, fontVariant: ['tabular-nums'] },
-  zeileMeta: { fontSize: schrift.klein, color: farben.textSekundaer, marginTop: 2 },
-  ampelText: { fontSize: schrift.klein, fontWeight: '600', marginTop: 2 },
+  zeileTyp: { fontFamily: schriftart.serif, flex: 1, fontSize: schrift.basis, fontWeight: '700', color: farben.text },
+  datum: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textTertiaer, fontVariant: ['tabular-nums'] },
+  zeileMeta: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, marginTop: 2 },
+  ampelText: { fontFamily: schriftart.serif, fontSize: schrift.klein, fontWeight: '600', marginTop: 2 },
   leerBox: { alignItems: 'center', gap: abstand.s, marginTop: abstand.xl },
-  leerTitel: { fontSize: schrift.gross, fontWeight: '700', color: farben.text },
-  leerText: { fontSize: schrift.basis, color: farben.textSekundaer, textAlign: 'center', lineHeight: 26 },
+  leerTitel: { fontFamily: schriftart.serif, fontSize: schrift.gross, fontWeight: '700', color: farben.text },
+  leerText: { fontFamily: schriftart.serif, fontSize: schrift.basis, color: farben.textSekundaer, textAlign: 'center', lineHeight: 26 },
 });

src/screens/ConsentScreen.tsx

@@ -8,7 +8,7 @@ import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../types';
 import { speichereConsent } from '../services/storage';
 import { GrossButton } from '../components/GrossButton';
-import { farben, schrift, abstand } from '../theme';
+import { farben, schrift, abstand, schriftart, ecke, kartenSchatten } from '../theme';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Consent'>;
 
@@ -60,18 +60,18 @@ export function ConsentScreen({ navigation }: Props) {
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: farben.hintergrund },
   inhalt: { padding: abstand.l },
-  titel: {
+  titel: { fontFamily: schriftart.serif,
     fontSize: schrift.titel,
     fontWeight: '700',
     color: farben.text,
     marginBottom: abstand.l,
   },
-  karte: {
+  karte: { ...kartenSchatten,
     backgroundColor: farben.flaeche,
-    borderRadius: 14,
+    borderRadius: ecke,
     padding: abstand.m,
     marginBottom: abstand.xl,
     gap: abstand.m,
   },
-  punkt: { fontSize: schrift.basis, color: farben.text, lineHeight: 27 },
+  punkt: { fontFamily: schriftart.serif, fontSize: schrift.basis, color: farben.text, lineHeight: 27 },
 });

src/screens/EinstellungenScreen.tsx

@@ -33,7 +33,7 @@ import {
 import { NUTZT_PROXY } from '../services/claudeClient';
 import { useAppStore } from '../store/useAppStore';
 import { GrossButton } from '../components/GrossButton';
-import { farben, schrift, abstand } from '../theme';
+import { farben, schrift, abstand, schriftart, ecke, kartenSchatten } from '../theme';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Einstellungen'>;
 
@@ -268,30 +268,30 @@ export function EinstellungenScreen({ navigation }: Props) {
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: farben.hintergrund },
-  abschnittTitel: {
+  abschnittTitel: { fontFamily: schriftart.serif,
     fontSize: schrift.gross,
     fontWeight: '700',
     color: farben.primaer,
     marginBottom: abstand.s,
   },
-  text: { fontSize: schrift.basis, color: farben.text, lineHeight: 27 },
-  hinweis: {
+  text: { fontFamily: schriftart.serif, fontSize: schrift.basis, color: farben.text, lineHeight: 27 },
+  hinweis: { fontFamily: schriftart.serif,
     fontSize: schrift.klein,
     color: farben.textSekundaer,
     lineHeight: 22,
     marginVertical: abstand.s,
   },
-  eingabe: {
+  eingabe: { fontFamily: schriftart.serif,
     borderWidth: 1,
     borderColor: farben.rand,
-    borderRadius: 12,
+    borderRadius: ecke,
     padding: abstand.s,
     fontSize: schrift.basis,
     color: farben.text,
     minHeight: 56,
     marginBottom: abstand.s,
   },
-  karte: { backgroundColor: farben.flaeche, borderRadius: 14, padding: abstand.m },
+  karte: { ...kartenSchatten, backgroundColor: farben.flaeche, borderRadius: ecke, padding: abstand.m },
   trenner: { height: 1, backgroundColor: farben.rand, marginVertical: abstand.l },
   schalterZeile: {
     flexDirection: 'row',
@@ -301,7 +301,7 @@ const styles = StyleSheet.create({
   option: {
     borderWidth: 1,
     borderColor: farben.rand,
-    borderRadius: 12,
+    borderRadius: ecke,
     padding: abstand.s,
     minHeight: 56,
     justifyContent: 'center',

src/screens/FristenScreen.tsx

@@ -21,7 +21,7 @@ import {
   NaechsteFrist,
 } from '../utils/ampel';
 import { Ikone } from '../components/Ikone';
-import { farben, schrift, abstand, TOUCH_TARGET } from '../theme';
+import { farben, schrift, abstand, TOUCH_TARGET, schriftart, ecke, kartenSchatten, formularRahmen } from '../theme';
 
 type Nav = NativeStackNavigationProp<RootStackParamList>;
 
@@ -93,8 +93,10 @@ export function FristenScreen() {
       {/* Kopf */}
       <View style={styles.kopf}>
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-          <Ikone name="uhr" groesse={22} farbe={farben.primaer} />
-          <Text style={styles.marke}>BehördenKlar</Text>
+          <Ikone name="brief" groesse={22} farbe={farben.primaer} />
+          <Text style={styles.marke}>
+            BehördenKlar <Text style={styles.markeZusatz}>by Webklar</Text>
+          </Text>
         </View>
         <View style={{ flexDirection: 'row', gap: 8 }}>
           <KopfKnopf ikone="buch" label="Glossar" onPress={() => navigation.navigate('Glossar')} />
@@ -104,7 +106,9 @@ export function FristenScreen() {
 
       <View style={{ paddingHorizontal: abstand.m }}>
         <Text style={styles.kicker}>Fristen-Übersicht</Text>
-        <Text style={styles.titel}>Ihre Fristen</Text>
+        <Text style={styles.titel}>
+          Ihre <Text style={styles.markiert}> Fristen </Text>
+        </Text>
         <Text style={styles.unterTitel}>
           Nach Dringlichkeit geordnet. Kümmern Sie sich zuerst um das Oberste.
         </Text>
@@ -238,44 +242,55 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    paddingHorizontal: abstand.m,
-    marginBottom: abstand.m,
+    marginHorizontal: abstand.m,
+    paddingBottom: abstand.s,
+    marginBottom: abstand.l,
+    // Briefkopf wie auf der Webseite: Tinten-Linie unter Absender
+    borderBottomWidth: 2,
+    borderBottomColor: farben.tinte,
   },
-  marke: { fontSize: schrift.gross, fontWeight: '700', color: farben.text },
+  markeZusatz: { fontFamily: schriftart.serif, fontSize: 12, fontWeight: '400', color: farben.textSekundaer },
+  // gelber Textmarker — das Erkennungszeichen der Webseite
+  markiert: { backgroundColor: farben.marker },
+  marke: { fontFamily: schriftart.serif, fontSize: schrift.gross, fontWeight: '700', color: farben.text },
   kopfKnopf: {
     width: 40,
     height: 40,
-    borderRadius: 20,
+    borderRadius: ecke,
     backgroundColor: farben.flaeche,
+    borderWidth: 1.5,
+    borderColor: farben.tinte,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  kicker: {
+  kicker: { fontFamily: schriftart.mono,
     fontSize: 12,
     letterSpacing: 1.3,
     textTransform: 'uppercase',
-    color: farben.primaer,
+    color: farben.textSekundaer,
     fontWeight: '600',
     marginBottom: 4,
   },
-  titel: { fontSize: schrift.riesig, fontWeight: '800', color: farben.text, marginBottom: 4 },
-  unterTitel: { fontSize: schrift.klein, color: farben.textSekundaer, marginBottom: abstand.l },
+  titel: { fontFamily: schriftart.serif, fontSize: schrift.riesig, fontWeight: '800', color: farben.text, marginBottom: 4 },
+  unterTitel: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, marginBottom: abstand.l },
+  // wichtigste Frist wie ein Formular der Webseite: Tinten-Rahmen, harter Schatten
   heldKarte: {
-    borderRadius: 16,
-    borderLeftWidth: 5,
+    ...formularRahmen,
+    borderRadius: ecke,
+    borderLeftWidth: 7,
     padding: abstand.l,
     marginBottom: abstand.l,
   },
   heldKopf: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 12 },
   punkt: { width: 9, height: 9, borderRadius: 5 },
-  heldKicker: { fontSize: 12, letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: '700' },
-  grosseZahl: { fontSize: 68, lineHeight: 68, fontWeight: '800', fontVariant: ['tabular-nums'] },
-  zahlEinheit: { fontSize: 22, fontWeight: '700', lineHeight: 24 },
-  zahlDatum: { fontSize: 13, color: farben.textSekundaer, marginTop: 2 },
+  heldKicker: { fontFamily: schriftart.mono, fontSize: 12, letterSpacing: 0.6, textTransform: 'uppercase', fontWeight: '700' },
+  grosseZahl: { fontFamily: schriftart.serif, fontSize: 68, lineHeight: 68, fontWeight: '800', fontVariant: ['tabular-nums'] },
+  zahlEinheit: { fontFamily: schriftart.serif, fontSize: 22, fontWeight: '700', lineHeight: 24 },
+  zahlDatum: { fontFamily: schriftart.serif, fontSize: 13, color: farben.textSekundaer, marginTop: 2 },
   trenner: { height: 1, backgroundColor: farben.rand, marginVertical: 15 },
-  briefTyp: { fontSize: schrift.gross, fontWeight: '700', color: farben.text, marginBottom: 3 },
-  briefMeta: { fontSize: schrift.klein, color: farben.textSekundaer },
-  abschnitt: {
+  briefTyp: { fontFamily: schriftart.serif, fontSize: schrift.gross, fontWeight: '700', color: farben.text, marginBottom: 3 },
+  briefMeta: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer },
+  abschnitt: { fontFamily: schriftart.mono,
     fontSize: 12,
     letterSpacing: 1.1,
     textTransform: 'uppercase',
@@ -284,42 +299,42 @@ const styles = StyleSheet.create({
     marginTop: abstand.l,
     marginBottom: abstand.s,
   },
-  zeile: {
+  zeile: { ...kartenSchatten,
     flexDirection: 'row',
     alignItems: 'center',
     gap: abstand.m,
     backgroundColor: farben.flaeche,
-    borderRadius: 12,
+    borderRadius: ecke,
     borderLeftWidth: 4,
     padding: abstand.m,
   },
   zahlBox: { width: 54, alignItems: 'center' },
-  zahlKlein: { fontSize: 30, fontWeight: '800', fontVariant: ['tabular-nums'], lineHeight: 32 },
-  zahlBoxLabel: { fontSize: 10, letterSpacing: 0.5, textTransform: 'uppercase', color: farben.textTertiaer },
-  zeileTyp: { fontSize: schrift.basis, fontWeight: '700', color: farben.text },
-  zeileMeta: { fontSize: schrift.klein, color: farben.textSekundaer, marginTop: 2 },
+  zahlKlein: { fontFamily: schriftart.serif, fontSize: 30, fontWeight: '800', fontVariant: ['tabular-nums'], lineHeight: 32 },
+  zahlBoxLabel: { fontFamily: schriftart.mono, fontSize: 10, letterSpacing: 0.5, textTransform: 'uppercase', color: farben.textTertiaer },
+  zeileTyp: { fontFamily: schriftart.serif, fontSize: schrift.basis, fontWeight: '700', color: farben.text },
+  zeileMeta: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, marginTop: 2 },
   tag: { alignSelf: 'flex-start', borderRadius: 5, paddingHorizontal: 9, paddingVertical: 3, marginTop: 7 },
-  tagText: { fontSize: 11, fontWeight: '600' },
-  infoZeile: {
+  tagText: { fontFamily: schriftart.serif, fontSize: 11, fontWeight: '600' },
+  infoZeile: { ...kartenSchatten,
     flexDirection: 'row',
     alignItems: 'center',
     gap: abstand.s,
     backgroundColor: farben.flaeche,
-    borderRadius: 12,
+    borderRadius: ecke,
     padding: abstand.m,
     minHeight: TOUCH_TARGET,
   },
-  schutz: {
+  schutz: { ...kartenSchatten,
     flexDirection: 'row',
     gap: abstand.s,
     alignItems: 'flex-start',
     backgroundColor: farben.flaeche,
-    borderRadius: 12,
+    borderRadius: ecke,
     padding: abstand.m,
     marginTop: abstand.l,
   },
-  schutzText: { flex: 1, fontSize: 12.5, lineHeight: 19, color: farben.textSekundaer },
+  schutzText: { fontFamily: schriftart.serif, flex: 1, fontSize: 12.5, lineHeight: 19, color: farben.textSekundaer },
   leerBox: { alignItems: 'center', gap: abstand.s, marginTop: abstand.xl, marginBottom: abstand.l },
-  leerTitel: { fontSize: schrift.gross, fontWeight: '700', color: farben.text },
-  leerText: { fontSize: schrift.basis, color: farben.textSekundaer, textAlign: 'center', lineHeight: 26 },
+  leerTitel: { fontFamily: schriftart.serif, fontSize: schrift.gross, fontWeight: '700', color: farben.text },
+  leerText: { fontFamily: schriftart.serif, fontSize: schrift.basis, color: farben.textSekundaer, textAlign: 'center', lineHeight: 26 },
 });

src/screens/GlossarScreen.tsx

@@ -4,7 +4,7 @@
 import React, { useState } from 'react';
 import { FlatList, StyleSheet, Text, TextInput, View } from 'react-native';
 import { GLOSSAR } from '../data/glossar';
-import { farben, schrift, abstand } from '../theme';
+import { farben, schrift, abstand, schriftart, ecke, kartenSchatten } from '../theme';
 
 export function GlossarScreen() {
   const [suche, setSuche] = useState('');
@@ -44,30 +44,30 @@ export function GlossarScreen() {
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: farben.hintergrund },
-  suche: {
+  suche: { fontFamily: schriftart.serif,
     margin: abstand.m,
     borderWidth: 1,
     borderColor: farben.rand,
-    borderRadius: 12,
+    borderRadius: ecke,
     padding: abstand.s,
     fontSize: schrift.basis,
     color: farben.text,
     minHeight: 48,
   },
-  karte: {
+  karte: { ...kartenSchatten,
     backgroundColor: farben.flaeche,
-    borderRadius: 14,
+    borderRadius: ecke,
     padding: abstand.m,
     marginBottom: abstand.s,
   },
-  begriff: { fontSize: schrift.gross, fontWeight: '700', color: farben.primaer },
-  erklaerung: {
+  begriff: { fontFamily: schriftart.serif, fontSize: schrift.gross, fontWeight: '700', color: farben.primaer },
+  erklaerung: { fontFamily: schriftart.serif,
     fontSize: schrift.basis,
     color: farben.text,
     lineHeight: 27,
     marginTop: abstand.xs,
   },
-  leer: {
+  leer: { fontFamily: schriftart.serif,
     textAlign: 'center',
     fontSize: schrift.basis,
     color: farben.textSekundaer,

src/screens/ScanScreen.tsx

@@ -22,7 +22,7 @@ import {
 import { planeErinnerungen } from '../services/erinnerungen';
 import { useAppStore, neueId } from '../store/useAppStore';
 import { GrossButton } from '../components/GrossButton';
-import { farben, schrift, abstand } from '../theme';
+import { farben, schrift, abstand, schriftart } from '../theme';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Scan'>;
 
@@ -204,7 +204,7 @@ const styles = StyleSheet.create({
     gap: abstand.m,
     justifyContent: 'center',
   },
-  anleitung: {
+  anleitung: { fontFamily: schriftart.serif,
     fontSize: schrift.basis,
     color: farben.textSekundaer,
     textAlign: 'center',
@@ -219,14 +219,14 @@ const styles = StyleSheet.create({
     padding: abstand.xl,
     gap: abstand.m,
   },
-  kontingent: {
+  kontingent: { fontFamily: schriftart.serif,
     fontSize: schrift.klein,
     color: farben.textSekundaer,
     textAlign: 'center',
     marginTop: abstand.m,
   },
-  ladeText: { fontSize: schrift.gross, fontWeight: '700', color: farben.text },
-  ladeHinweis: {
+  ladeText: { fontFamily: schriftart.serif, fontSize: schrift.gross, fontWeight: '700', color: farben.text },
+  ladeHinweis: { fontFamily: schriftart.serif,
     fontSize: schrift.basis,
     color: farben.textSekundaer,
     textAlign: 'center',

src/screens/VerbindenScreen.tsx

@@ -20,7 +20,7 @@ import { holeAusUebergabe, loescheUebergabe, oeffneUebergabe, sendeAnUebergabe }
 import { briefZuWebPaket, leseUebergabeLink, webPaketZuBrief, WebPaket } from '../utils/uebergabeFormat';
 import { GrossButton } from '../components/GrossButton';
 import { Ikone } from '../components/Ikone';
-import { farben, schrift, abstand } from '../theme';
+import { farben, schrift, abstand, schriftart, ecke, kartenSchatten } from '../theme';
 
 type Props = NativeStackScreenProps<RootStackParamList, 'Verbinden'>;
 
@@ -173,19 +173,19 @@ export function VerbindenScreen({ navigation, route }: Props) {
 
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: farben.hintergrund },
-  titel: { fontSize: schrift.titel, fontWeight: '700', color: farben.text, marginBottom: abstand.s },
-  text: { fontSize: schrift.basis, color: farben.text, lineHeight: 26 },
-  klein: { fontSize: schrift.klein, color: farben.textSekundaer, marginBottom: abstand.s },
+  titel: { fontFamily: schriftart.serif, fontSize: schrift.titel, fontWeight: '700', color: farben.text, marginBottom: abstand.s },
+  text: { fontFamily: schriftart.serif, fontSize: schrift.basis, color: farben.text, lineHeight: 26 },
+  klein: { fontFamily: schriftart.serif, fontSize: schrift.klein, color: farben.textSekundaer, marginBottom: abstand.s },
   kameraRahmen: {
-    marginTop: abstand.m, height: 300, borderRadius: 16, overflow: 'hidden',
+    marginTop: abstand.m, height: 300, borderRadius: ecke, overflow: 'hidden',
     backgroundColor: farben.flaecheSekundaer,
   },
   kameraLeer: { flex: 1, justifyContent: 'center', padding: abstand.m, gap: abstand.m },
-  meldung: { marginTop: abstand.m, gap: abstand.m, padding: abstand.m, borderRadius: 16, backgroundColor: farben.flaeche },
+  meldung: { ...kartenSchatten, marginTop: abstand.m, gap: abstand.m, padding: abstand.m, borderRadius: ecke, backgroundColor: farben.flaeche },
   schutzZeile: { flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: abstand.m },
-  schutzText: { fontSize: 13, color: farben.textTertiaer },
-  feld: {
-    backgroundColor: farben.flaeche, borderRadius: 12, padding: 14, fontSize: schrift.klein,
+  schutzText: { fontFamily: schriftart.serif, fontSize: 13, color: farben.textTertiaer },
+  feld: { fontFamily: schriftart.serif,
+    backgroundColor: farben.flaeche, borderRadius: ecke, padding: 14, fontSize: schrift.klein,
     color: farben.text, borderWidth: 1, borderColor: farben.rand, marginBottom: abstand.s,
   },
 });