Prepare breakpoint handling

assets/i18n/de.json

@@ -5,7 +5,7 @@
       "title": "AmBiTo Toolkit",
       "links": {
         "massnahmen": {
-          "title": "Maßnahmen"
+          "title": "Maßnahmenkategorien"
         },
         "dashboard": {
           "title": "Dashboard"
@@ -16,7 +16,7 @@
     "start": {
       "links": {
         "massnahmen": {
-          "title": "Maßnahmen"
+          "title": "Maßnahmenkategorien"
         },
         "dashboard": {
           "title": "Dashboard"

lib/main.dart

@@ -2,9 +2,12 @@ import 'package:ambito/src/packages/ambito_api/base_api.dart';
 import 'package:ambito/src/packages/ambito_db/base_db.dart';
 import 'package:ambito/src/packages/ambito_sharedprefs/ambito_sharedprefs.dart';
 import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
-import 'package:ambito/src/pages/actions/action_detail_page.dart';
+import 'package:ambito/src/packages/ambito_theme/ambito_theme_large.dart';
+import 'package:ambito/src/packages/ambito_theme/ambito_theme_medium.dart';
+import 'package:ambito/src/packages/ambito_theme/ambito_theme_small.dart';
 import 'package:ambito/src/pages/actions/actions_page.dart';
 import 'package:ambito/src/pages/actions/actions_pre_page.dart';
+import 'package:ambito/src/pages/actions/detail/action_detail_page.dart';
 import 'package:ambito/src/pages/calendar/calendar_page.dart';
 import 'package:ambito/src/pages/calendar/calendar_page_year.dart';
 import 'package:ambito/src/pages/dashboard/dashboard_page.dart';
@@ -16,6 +19,7 @@ import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:get/get.dart';
 import 'package:isar/isar.dart';
 import 'package:logger/logger.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:syncfusion_localizations/syncfusion_localizations.dart';
 
@@ -23,9 +27,50 @@ final Logger logger = Logger(
   printer: PrettyPrinter(),
 );
 
+const BreakpointConfiguration myBreakpoints = BreakpointConfiguration(
+  xs: Breakpoint(
+    breakpoint: 0,
+    width: double.infinity,
+    margin: 16,
+    padding: 0,
+    columns: 4,
+  ),
+  sm: Breakpoint(
+    breakpoint: 320,
+    width: double.infinity,
+    margin: 32,
+    padding: 0,
+    columns: 8,
+  ),
+  md: Breakpoint(
+    breakpoint: 905,
+    width: 840,
+    margin: null,
+    padding: 0,
+    columns: 12,
+  ),
+  lg: Breakpoint(
+    breakpoint: 1240,
+    width: 1152,
+    margin: 0,
+    padding: 0,
+    columns: 12,
+  ),
+  xl: Breakpoint(
+    breakpoint: 1440,
+    width: 1152,
+    margin: null,
+    padding: 0,
+    columns: 12,
+  ),
+  xxl: null,
+);
+
 late Isar isar;
 late SharedPreferences prefs;
-AmbitoTheme baseTheme = AmbitoTheme();
+AmbitoTheme largeTheme = AmbitoThemeLarge();
+AmbitoTheme mediumTheme = AmbitoThemeMedium();
+AmbitoTheme smallTheme = AmbitoThemeSmall();
 
 void main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -58,91 +103,94 @@ class Ambito extends StatelessWidget {
   const Ambito({super.key});
   @override
   Widget build(BuildContext context) {
-    return GetMaterialApp(
+    return BreakpointConfigurator(
-      debugShowCheckedModeBanner: false,
+      configuration: myBreakpoints,
-      localizationsDelegates: [
+      child: GetMaterialApp(
-        FlutterI18nDelegate(
+        debugShowCheckedModeBanner: false,
-          translationLoader: FileTranslationLoader(
+        localizationsDelegates: [
-            fallbackFile: 'de',
+          FlutterI18nDelegate(
-            basePath: 'i18n',
+            translationLoader: FileTranslationLoader(
+              fallbackFile: 'de',
+              basePath: 'i18n',
+            ),
+            missingTranslationHandler: (key, locale) {
+              if (kDebugMode) {
+                print("--- Missing Key: $key, languageCode: $locale");
+              }
+            },
           ),
-          missingTranslationHandler: (key, locale) {
+          GlobalMaterialLocalizations.delegate,
-            if (kDebugMode) {
+          GlobalCupertinoLocalizations.delegate,
-              print("--- Missing Key: $key, languageCode: $locale");
+          GlobalWidgetsLocalizations.delegate,
-            }
+          SfGlobalLocalizations.delegate,
-          },
+        ],
-        ),
+        title: 'AmBiTo',
-        GlobalMaterialLocalizations.delegate,
+        supportedLocales: const [Locale('de')],
-        GlobalCupertinoLocalizations.delegate,
+        locale: const Locale('de'),
-        GlobalWidgetsLocalizations.delegate,
+        builder: FlutterI18n.rootAppBuilder(),
-        SfGlobalLocalizations.delegate,
+        theme: (getTheme(context)).lightThemeData,
-      ],
+        darkTheme: (getTheme(context)).darkThemeData,
-      title: 'AmBiTo',
+        themeMode: ThemeMode.light,
-      supportedLocales: const [Locale('de')],
+        initialRoute: '/massnahmen',
-      locale: const Locale('de'),
+        getPages: [
-      builder: FlutterI18n.rootAppBuilder(),
+          GetPage(
-      theme: baseTheme.lightThemeData,
+            name: '/',
-      darkTheme: baseTheme.darkThemeData,
+            page: () => const ActionsPrePage(),
-      themeMode: ThemeMode.light,
-      initialRoute: '/massnahmen',
-      getPages: [
-        GetPage(
-          name: '/',
-          page: () => const ActionsPrePage(),
-        ),
-        GetPage(
-          name: '/kalender',
-          page: () => const CalendarPage(),
-        ),
-        GetPage(
-          name: '/kalender/jahr',
-          page: () => const CalendarPageYear(),
-        ),
-        GetPage(
-          name: '/massnahmen',
-          page: () => const ActionsPrePage(),
-        ),
-        GetPage(
-          name: '/massnahmendatenbank',
-          page: () => const ActionsPage(),
-        ),
-        GetPage(
-          name: '/dashboard',
-          page: () => DashboardPage(
-            businessId: prefs.getInt('currentUser') ?? 22,
-            userId: 0,
           ),
-        ),
+          GetPage(
-        GetPage(
+            name: '/kalender',
-          name: '/dashboard/meine-massnahmen',
+            page: () => const CalendarPage(),
-          page: () => DashboardPage(
-            businessId: prefs.getInt('currentUser') ?? 22,
-            userId: 0,
           ),
-        ),
+          GetPage(
-        GetPage(
+            name: '/kalender/jahr',
-          name: '/dashboard/urkunde',
+            page: () => const CalendarPageYear(),
-          page: () => DashboardPage(
-            businessId: prefs.getInt('currentUser') ?? 22,
-            userId: 0,
           ),
-        ),
+          GetPage(
-        GetPage(
+            name: '/massnahmen',
-          name: '/dashboard/flaechen',
+            page: () => const ActionsPrePage(),
-          page: () => DashboardPage(
-            businessId: prefs.getInt('currentUser') ?? 22,
-            userId: 0,
           ),
-        ),
+          GetPage(
-        GetPage(
+            name: '/massnahmendatenbank',
-          name: '/dashboard/stammdaten',
+            page: () => const ActionsPage(),
-          page: () => DashboardPage(
-            businessId: prefs.getInt('currentUser') ?? 22,
-            userId: 0,
           ),
-        ),
+          GetPage(
-        GetPage(name: '/massnahme/:id', page: () => const ActionDetailPage())
+            name: '/dashboard',
-      ],
+            page: () => DashboardPage(
+              businessId: prefs.getInt('currentUser') ?? 22,
+              userId: 0,
+            ),
+          ),
+          GetPage(
+            name: '/dashboard/meine-massnahmen',
+            page: () => DashboardPage(
+              businessId: prefs.getInt('currentUser') ?? 22,
+              userId: 0,
+            ),
+          ),
+          GetPage(
+            name: '/dashboard/urkunde',
+            page: () => DashboardPage(
+              businessId: prefs.getInt('currentUser') ?? 22,
+              userId: 0,
+            ),
+          ),
+          GetPage(
+            name: '/dashboard/flaechen',
+            page: () => DashboardPage(
+              businessId: prefs.getInt('currentUser') ?? 22,
+              userId: 0,
+            ),
+          ),
+          GetPage(
+            name: '/dashboard/stammdaten',
+            page: () => DashboardPage(
+              businessId: prefs.getInt('currentUser') ?? 22,
+              userId: 0,
+            ),
+          ),
+          GetPage(name: '/massnahme/:id', page: () => const ActionDetailPage())
+        ],
+      ),
     );
   }
 }

lib/src/packages/ambito_notifier/notifier/theme_manager.dart

@@ -0,0 +1,19 @@
+import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
+import 'package:ambito/src/packages/ambito_theme/ambito_theme_medium.dart';
+import 'package:flutter/cupertino.dart';
+
+class ThemeManager with ChangeNotifier {
+  AmbitoTheme? _themeData;
+
+  /// Use this method on UI to get selected theme.
+  AmbitoTheme? get themeData {
+    _themeData ??= AmbitoThemeMedium();
+    return _themeData;
+  }
+
+  /// Sets theme and notifies listeners about change.
+  setTheme(AmbitoTheme theme) async {
+    _themeData = theme;
+    notifyListeners();
+  }
+}

lib/src/packages/ambito_theme/ambito_theme.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
+
+import '../../../main.dart';
 
 final orangeColors = {
   'primary': const Color(0xffeebb4b),
@@ -45,7 +48,18 @@ final actionAreaFGColors = {
   'Betriebsstätte': const Color(0xff999999),
 };
 
-class AmbitoTheme {
+AmbitoTheme getTheme(BuildContext context) {
+  var breakpoint = context.breakpoint;
+  if (breakpoint >= myBreakpoints.lg) {
+    return largeTheme;
+  }
+  if (breakpoint >= myBreakpoints.sm) {
+    return mediumTheme;
+  }
+  return smallTheme;
+}
+
+abstract class AmbitoTheme {
   static ThemeMode appThemeMode = ThemeMode.light;
 
   ColorScheme get lightColorScheme => const ColorScheme(

lib/src/packages/ambito_theme/ambito_theme_large.dart

@@ -0,0 +1,97 @@
+import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class AmbitoThemeLarge extends AmbitoTheme {
+  TextTheme get textTheme => TextTheme(
+        displayLarge: GoogleFonts.openSans(
+            fontSize: 57,
+            height: 1.12,
+            fontWeight: FontWeight.w400,
+            letterSpacing: -.25),
+        displayMedium: GoogleFonts.openSans(
+          fontSize: 45,
+          height: 1.15,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        displaySmall: GoogleFonts.openSans(
+          fontSize: 36,
+          height: 1.22,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        headlineLarge: GoogleFonts.openSans(
+          fontSize: 48,
+          height: 1.25,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        headlineMedium: GoogleFonts.openSans(
+          fontSize: 28,
+          height: 1.29,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        headlineSmall: GoogleFonts.openSans(
+          fontSize: 24,
+          height: 1.33,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        titleLarge: GoogleFonts.openSans(
+          fontSize: 40,
+          height: 1.27,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        titleMedium: GoogleFonts.openSans(
+          fontSize: 16,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.15,
+        ),
+        titleSmall: GoogleFonts.openSans(
+          fontSize: 14,
+          height: 1.42,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.1,
+        ),
+        labelLarge: GoogleFonts.openSans(
+          fontSize: 32,
+          height: 1.42,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.1,
+        ),
+        labelMedium: GoogleFonts.openSans(
+          fontSize: 24,
+          height: 1.33,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.15,
+        ),
+        labelSmall: GoogleFonts.openSans(
+          fontSize: 16,
+          height: 1.45,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.1,
+        ),
+        bodyLarge: GoogleFonts.openSans(
+          fontSize: 16,
+          height: 1.5,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0.5,
+        ),
+        bodyMedium: GoogleFonts.openSans(
+          fontSize: 14,
+          height: 1.42,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0.25,
+        ),
+        bodySmall: GoogleFonts.openSans(
+          fontSize: 12,
+          height: 1.33,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0.4,
+        ),
+      );
+}

lib/src/packages/ambito_theme/ambito_theme_medium.dart

@@ -0,0 +1,97 @@
+import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class AmbitoThemeMedium extends AmbitoTheme {
+  TextTheme get textTheme => TextTheme(
+        displayLarge: GoogleFonts.openSans(
+            fontSize: 57,
+            height: 1.12,
+            fontWeight: FontWeight.w400,
+            letterSpacing: -.25),
+        displayMedium: GoogleFonts.openSans(
+          fontSize: 45,
+          height: 1.15,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        displaySmall: GoogleFonts.openSans(
+          fontSize: 36,
+          height: 1.22,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        headlineLarge: GoogleFonts.openSans(
+          fontSize: 44,
+          height: 1.25,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        headlineMedium: GoogleFonts.openSans(
+          fontSize: 28,
+          height: 1.29,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        headlineSmall: GoogleFonts.openSans(
+          fontSize: 24,
+          height: 1.33,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        titleLarge: GoogleFonts.openSans(
+          fontSize: 40,
+          height: 1.27,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        titleMedium: GoogleFonts.openSans(
+          fontSize: 16,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.15,
+        ),
+        titleSmall: GoogleFonts.openSans(
+          fontSize: 14,
+          height: 1.42,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.1,
+        ),
+        labelLarge: GoogleFonts.openSans(
+          fontSize: 32,
+          height: 1.42,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.1,
+        ),
+        labelMedium: GoogleFonts.openSans(
+          fontSize: 24,
+          height: 1.33,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.15,
+        ),
+        labelSmall: GoogleFonts.openSans(
+          fontSize: 16,
+          height: 1.45,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.1,
+        ),
+        bodyLarge: GoogleFonts.openSans(
+          fontSize: 16,
+          height: 1.5,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0.5,
+        ),
+        bodyMedium: GoogleFonts.openSans(
+          fontSize: 14,
+          height: 1.42,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0.25,
+        ),
+        bodySmall: GoogleFonts.openSans(
+          fontSize: 12,
+          height: 1.33,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0.4,
+        ),
+      );
+}

lib/src/packages/ambito_theme/ambito_theme_small.dart

@@ -0,0 +1,97 @@
+import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+class AmbitoThemeSmall extends AmbitoTheme {
+  TextTheme get textTheme => TextTheme(
+        displayLarge: GoogleFonts.openSans(
+            fontSize: 57,
+            height: 1.12,
+            fontWeight: FontWeight.w400,
+            letterSpacing: -.25),
+        displayMedium: GoogleFonts.openSans(
+          fontSize: 45,
+          height: 1.15,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        displaySmall: GoogleFonts.openSans(
+          fontSize: 36,
+          height: 1.22,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        headlineLarge: GoogleFonts.openSans(
+          fontSize: 32,
+          height: 1.25,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        headlineMedium: GoogleFonts.openSans(
+          fontSize: 28,
+          height: 1.29,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        headlineSmall: GoogleFonts.openSans(
+          fontSize: 24,
+          height: 1.33,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        titleLarge: GoogleFonts.openSans(
+          fontSize: 40,
+          height: 1.27,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0,
+        ),
+        titleMedium: GoogleFonts.openSans(
+          fontSize: 16,
+          height: 1.5,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.15,
+        ),
+        titleSmall: GoogleFonts.openSans(
+          fontSize: 14,
+          height: 1.42,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.1,
+        ),
+        labelLarge: GoogleFonts.openSans(
+          fontSize: 32,
+          height: 1.42,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.1,
+        ),
+        labelMedium: GoogleFonts.openSans(
+          fontSize: 24,
+          height: 1.33,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.15,
+        ),
+        labelSmall: GoogleFonts.openSans(
+          fontSize: 16,
+          height: 1.45,
+          fontWeight: FontWeight.w500,
+          letterSpacing: 0.1,
+        ),
+        bodyLarge: GoogleFonts.openSans(
+          fontSize: 16,
+          height: 1.5,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0.5,
+        ),
+        bodyMedium: GoogleFonts.openSans(
+          fontSize: 14,
+          height: 1.42,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0.25,
+        ),
+        bodySmall: GoogleFonts.openSans(
+          fontSize: 12,
+          height: 1.33,
+          fontWeight: FontWeight.w400,
+          letterSpacing: 0.4,
+        ),
+      );
+}

lib/src/pages/actions/actions_page.dart

@@ -11,6 +11,7 @@ import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:get/get.dart';
 import 'package:highlight_text/highlight_text.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 
 import '../../../main.dart';
 import '../../entity/entities.dart';
@@ -40,7 +41,8 @@ class ActionsPageState extends State<ActionsPage> {
   List<String>? selectedMonths;
   List massnahmen = [];
   Map<String, HighlightedWord> words = {};
-  String? preselect;
+  String? preselectAreaType;
+  String? preselectMeasureType;
 
   final TextEditingController _searchController = TextEditingController();
   final FocusNode _searchFocusNode = FocusNode();
@@ -50,10 +52,10 @@ class ActionsPageState extends State<ActionsPage> {
     ambitoFilterNotifier.addListener(_changeListener);
 
     setState(() {
-      preselect = prefs.getString('selected_areaType');
+      preselectAreaType = prefs.getString('selected_areaType');
-      if (preselect != null && preselect!.isNotEmpty) {
+      if (preselectAreaType != null && preselectAreaType!.isNotEmpty) {
-        filterAreaType = preselect;
+        filterAreaType = preselectAreaType;
-        ambitoFilterNotifier.setFilter('areaType', preselect!);
+        ambitoFilterNotifier.setFilter('areaType', preselectAreaType!);
       }
     });
     _initializeData();
@@ -203,6 +205,7 @@ class ActionsPageState extends State<ActionsPage> {
     return Scaffold(
       appBar: AmbitoAppbar(
         links: const ['dashboard', 'massnahmen'],
+        breakpoint: Breakpoint.fromContext(context),
       ),
       body: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 32),
@@ -303,10 +306,8 @@ class ActionsPageState extends State<ActionsPage> {
   }
 
   Widget getCard(BuildContext context, Measure massnahme) {
-    final background =
-        actionGroupColors[massnahme.actionGroup?.value] ?? Colors.white;
     final image = massnahme.getThumbnail();
-
+    final AmbitoTheme theme = getTheme(context);
     return Visibility(
       visible: visible[massnahme.id] ?? false,
       child: InkWell(
@@ -314,37 +315,57 @@ class ActionsPageState extends State<ActionsPage> {
         onTap: () async {
           Get.toNamed('/massnahme/${massnahme.id}');
         },
-        child: SizedBox(
+        highlightColor: Colors.transparent,
-          width: 800,
+        splashColor: Colors.transparent,
-          child: Card(
+        focusColor: Colors.transparent,
-            elevation: 2,
+        hoverColor: Colors.transparent,
-            color: Colors.white,
+        child: Padding(
-            child: Container(
+          padding: const EdgeInsets.only(bottom: 40),
-              decoration: BoxDecoration(
+          child: SizedBox(
-                border: Border(left: BorderSide(color: background, width: 15)),
+            width: 800,
-              ),
+            child: Card(
-              padding: const EdgeInsets.all(32),
+              elevation: 0,
+              color: theme.currentColorScheme.outline.withOpacity(.1),
               child: Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  image ?? const SizedBox(width: 300, height: 140),
+                  ClipRRect(
-                  const SizedBox(width: 16),
+                    borderRadius: BorderRadius.circular(8.0),
+                    child: (image != null)
+                        ? image
+                        : Container(
+                            width: 300,
+                            height: 150,
+                            decoration: BoxDecoration(
+                              color: theme.currentColorScheme.primary
+                                  .withOpacity(.1),
+                              image: const DecorationImage(
+                                image:
+                                    AssetImage('assets/images/logo_trans.png'),
+                                fit: BoxFit.fitHeight,
+                              ),
+                            ),
+                          ),
+                  ),
                   Expanded(
-                    child: Column(
+                    child: Padding(
-                      crossAxisAlignment: CrossAxisAlignment.start,
+                      padding: EdgeInsets.all(10),
-                      children: [
+                      child: Column(
-                        TextHighlight(
+                        crossAxisAlignment: CrossAxisAlignment.start,
-                          text: massnahme.name!,
+                        children: [
-                          words: words,
+                          TextHighlight(
-                          textStyle: Theme.of(context).textTheme.headlineSmall,
+                            text: massnahme.name!,
-                        ),
+                            words: words,
-                        const SizedBox(height: 8),
+                            textStyle: theme.textTheme.headlineSmall,
-                        TextHighlight(
+                          ),
-                          text: massnahme.factsheetDefinition ?? '',
+                          const SizedBox(height: 8),
-                          words: words,
+                          TextHighlight(
-                          textStyle: Theme.of(context).textTheme.bodyMedium,
+                            text: massnahme.factsheetDefinition ?? '',
-                        ),
+                            words: words,
-                      ],
+                            textStyle: theme.textTheme.bodyLarge,
+                          ),
+                        ],
+                      ),
                     ),
                   ),
                 ],

lib/src/pages/actions/actions_pre_page.dart

@@ -4,6 +4,7 @@ import 'package:ambito/src/entity/measure/measure_repository.dart';
 import 'package:ambito/src/pages/ambito_page.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 
 import '../../../main.dart';
 import '../../packages/ambito_theme/ambito_theme.dart';
@@ -46,10 +47,10 @@ class ActionsPrePageState extends State<ActionsPrePage> {
             onHover: (value) {},
             child: SizedBox(
               width: 262,
-              height: 350,
+              height: 380,
               child: Card(
-                elevation: 4,
+                elevation: 0,
-                surfaceTintColor: actionAreaColors[filter.name!],
+                color: actionAreaColors[filter.name!],
                 child: Column(
                   children: [
                     ClipRRect(
@@ -58,26 +59,27 @@ class ActionsPrePageState extends State<ActionsPrePage> {
                         filter.image!,
                       ),
                     ),
-                    baseTheme.verticalSpacer,
+                    largeTheme.verticalSpacer,
                     Padding(
                       padding: const EdgeInsets.only(left: 16, right: 16),
                       child: Text(
                         filter.name!,
-                        style: baseTheme.currentThemeData.textTheme.titleLarge
+                        style: largeTheme
+                            .currentThemeData.textTheme.headlineMedium
                             ?.copyWith(
                           color: actionAreaFGColors[filter.name!],
                           fontWeight: FontWeight.bold,
                         ),
                       ),
                     ),
-                    baseTheme.verticalSpacer,
+                    largeTheme.verticalSpacer,
                     Padding(
                       padding: const EdgeInsets.only(left: 16, right: 16),
                       child: Text(
                         filter.description!,
-                        style: baseTheme.currentThemeData.textTheme.bodyMedium
+                        style: largeTheme.currentThemeData.textTheme.bodyMedium
                             ?.copyWith(
-                          color: baseTheme.currentColorScheme.onSurface,
+                          color: largeTheme.currentColorScheme.onSurface,
                         ),
                       ),
                     ),
@@ -87,7 +89,7 @@ class ActionsPrePageState extends State<ActionsPrePage> {
                           left: 16, right: 16, bottom: 16),
                       child: Text(
                         'Anzahl: ${filter.ids!.length}',
-                        style: baseTheme.currentThemeData.textTheme.titleMedium
+                        style: largeTheme.currentThemeData.textTheme.titleMedium
                             ?.copyWith(
                           color: actionAreaFGColors[filter.name!],
                           fontWeight: FontWeight.bold,
@@ -108,53 +110,74 @@ class ActionsPrePageState extends State<ActionsPrePage> {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return Scaffold(
       appBar: AmbitoAppbar(
         links: const ['dashboard', 'massnahmen'],
+        breakpoint: Breakpoint.fromContext(context),
       ),
-      body: SingleChildScrollView(
+      body: BreakpointBuilder(builder: (
-        child: Center(
+        context,
-          child: SizedBox(
+        breakpoint,
-            width: 1152,
+        configuration,
-            child: Column(
+      ) {
-              mainAxisSize: MainAxisSize.max,
+        return SingleChildScrollView(
-              mainAxisAlignment: MainAxisAlignment.start,
+          child: Center(
-              crossAxisAlignment: CrossAxisAlignment.start,
+            child: SizedBox(
-              children: [
+              width: Breakpoint.fromContext(context).width,
-                baseTheme.verticalSpacerMax,
+              child: Column(
-                Text(
+                mainAxisSize: MainAxisSize.max,
-                  'Maßnahmenkategorien',
+                mainAxisAlignment: MainAxisAlignment.start,
-                  textAlign: TextAlign.start,
+                crossAxisAlignment: CrossAxisAlignment.start,
-                  style: baseTheme.currentThemeData.textTheme.headlineLarge
+                children: [
-                      ?.copyWith(
+                  Text(breakpoint.toString()),
-                    color: baseTheme.currentColorScheme.onSurface,
+                  theme.verticalSpacerMax,
+                  Text(
+                    'Maßnahmenkategorien',
+                    textAlign: TextAlign.start,
+                    style: theme.currentThemeData.textTheme.headlineLarge
+                        ?.copyWith(
+                      color: theme.currentColorScheme.onSurface,
+                    ),
                   ),
-                ),
+                  theme.verticalSpacerMax,
-                baseTheme.verticalSpacerMax,
+                  Wrap(
-                Wrap(
+                    alignment: WrapAlignment.center,
-                  alignment: WrapAlignment.center,
+                    spacing: 32,
-                  spacing: 32,
+                    children: cards,
-                  children: cards,
+                  ),
-                ),
+                  theme.verticalSpacerMax,
-                baseTheme.verticalSpacerMax,
+                  TextButton(
-                TextButton(
                     onPressed: () async {
                       await prefs.setString('selected_areaType', '');
                       await Get.toNamed('/massnahmendatenbank');
                     },
-                    child: Text(
+                    child: Container(
-                      'Zeig mir alle $counterComplete Maßnahmen...',
+                      decoration: BoxDecoration(
-                      style: const TextStyle(
+                        borderRadius: BorderRadius.all(Radius.circular(8)),
-                        fontSize: 24,
+                        color:
-                        fontWeight: FontWeight.bold,
+                            theme.currentColorScheme.onSurface.withOpacity(.1),
-                        color: Colors.blueAccent,
                       ),
-                    ))
+                      width: Breakpoint.fromContext(context).width,
-              ],
+                      child: Padding(
+                        padding: EdgeInsets.all(20),
+                        child: Text(
+                          'Alle Maßnahmen anzeigen',
+                          style: theme.headlineMedium.copyWith(
+                            color: theme.currentColorScheme.outline,
+                          ),
+                          textAlign: TextAlign.center,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
             ),
           ),
-        ),
+        );
-      ),
+      }),
     );
   }
 }

lib/src/pages/actions/cards/factsheet_card.dart

@@ -1,63 +0,0 @@
-import 'package:ambito/src/extensions/extensions.dart';
-import 'package:flutter/material.dart';
-
-import '../../../../main.dart';
-import '../../../entity/entities.dart';
-
-class FactsheetCard extends StatelessWidget {
-  const FactsheetCard({super.key, required this.massnahme});
-
-  final Measure massnahme;
-
-  @override
-  Widget build(BuildContext context) {
-    return SizedBox(
-      width: double.infinity,
-      child: Card(
-        shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(0),
-        ),
-        elevation: 0,
-        color: baseTheme.currentColorScheme.tertiary,
-        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text(
-                context.translate('page.actionDetailPage.factsheet.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
-              ),
-              baseTheme.verticalSpacer,
-            ],
-          ),
-        ),
-      ),
-    );
-  }
-
-  _getSortedMaterials(BuildContext context) {
-    List<String> items = [];
-    if (massnahme.materialAction != null) {
-      for (IdValueColor ivc in massnahme.materialAction!) {
-        items.add(ivc.value!);
-      }
-    }
-    items.sort((a, b) => a.toString().compareTo(b.toString()));
-    List<ListTile> tiles = [];
-    for (String item in items) {
-      tiles.add(
-        ListTile(
-          leading: Icon(Icons.fiber_manual_record),
-          title: Text(
-            item,
-            style: Theme.of(context).textTheme.bodyMedium,
-          ),
-        ),
-      );
-    }
-    return Column(
-      children: tiles,
-    );
-  }
-}

lib/src/pages/actions/detail/action_detail_page.dart

@@ -1,23 +1,14 @@
 import 'package:ambito/src/entity/entities.dart';
 import 'package:ambito/src/entity/measure/measure_repository.dart';
-import 'package:ambito/src/pages/actions/cards/background_card.dart';
-import 'package:ambito/src/pages/actions/cards/biodiverisity_card.dart';
-import 'package:ambito/src/pages/actions/cards/creation_card.dart';
-import 'package:ambito/src/pages/actions/cards/description_card.dart';
-import 'package:ambito/src/pages/actions/cards/factsheet_card.dart';
-import 'package:ambito/src/pages/actions/cards/funding_card.dart';
-import 'package:ambito/src/pages/actions/cards/maintenance_card.dart';
-import 'package:ambito/src/pages/actions/cards/presets_card.dart';
-import 'package:ambito/src/pages/actions/cards/review_card.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
 import 'package:get/get.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 
-import '../../../main.dart';
+import '../../../../main.dart';
-import '../../widgets/appbar/ambito_appbar.dart';
+import '../../../widgets/appbar/ambito_appbar.dart';
-import '../ambito_page.dart';
+import '../../ambito_page.dart';
-import 'cards/advisor_card.dart';
+import 'cards/_cards.dart';
-import 'cards/material_card.dart';
 
 class ActionDetailPage extends AmbitoPage {
   const ActionDetailPage({super.key});
@@ -51,46 +42,46 @@ class ActionDetailPageState extends State<ActionDetailPage> {
             DescriptionCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
             BackgroundCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
             PresetsCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
             BiodiverisityCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
             CreationCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
             MaintenanceCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
             FundingCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
           ];
 
           sidebarItems = [
             AdvisorCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
             MaterialCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
             FactsheetCard(
               massnahme: massnahme!,
             ),
-            baseTheme.verticalSpacer,
+            largeTheme.verticalSpacer,
             ReviewCard(
               massnahme: massnahme!,
             ),
@@ -109,6 +100,7 @@ class ActionDetailPageState extends State<ActionDetailPage> {
     return Scaffold(
       appBar: AmbitoAppbar(
         links: const ['dashboard', 'massnahmen'],
+        breakpoint: Breakpoint.fromContext(context),
       ),
       body: content,
     );
@@ -149,19 +141,19 @@ class ActionDetailPageState extends State<ActionDetailPage> {
         Container(
           width: double.infinity,
           height: 400,
-          color: baseTheme.currentColorScheme.primary,
+          color: largeTheme.currentColorScheme.primary,
           child: massnahme.getImage(),
         ),
         Expanded(
           child: SingleChildScrollView(
             child: Column(
               children: [
-                baseTheme.verticalSpacer,
+                largeTheme.verticalSpacer,
                 Align(
                   alignment: Alignment.centerLeft,
                   child: Text(
                     massnahme.name!,
-                    style: baseTheme.currentThemeData.textTheme.titleLarge,
+                    style: largeTheme.currentThemeData.textTheme.titleLarge,
                   ),
                 ),
                 Row(
@@ -177,7 +169,7 @@ class ActionDetailPageState extends State<ActionDetailPage> {
                             }),
                       ),
                     ),
-                    baseTheme.horizontalSpacer,
+                    largeTheme.horizontalSpacer,
                     SizedBox(
                       width: 300,
                       child: Column(
@@ -186,15 +178,15 @@ class ActionDetailPageState extends State<ActionDetailPage> {
                           AdvisorCard(
                             massnahme: massnahme,
                           ),
-                          baseTheme.verticalSpacer,
+                          largeTheme.verticalSpacer,
                           MaterialCard(
                             massnahme: massnahme,
                           ),
-                          baseTheme.verticalSpacer,
+                          largeTheme.verticalSpacer,
                           FactsheetCard(
                             massnahme: massnahme,
                           ),
-                          baseTheme.verticalSpacer,
+                          largeTheme.verticalSpacer,
                           ReviewCard(
                             massnahme: massnahme,
                           ),

lib/src/pages/actions/detail/cards/_cards.dart

@@ -0,0 +1,11 @@
+export 'advisor_card.dart';
+export 'background_card.dart';
+export 'biodiverisity_card.dart';
+export 'creation_card.dart';
+export 'description_card.dart';
+export 'factsheet_card.dart';
+export 'funding_card.dart';
+export 'maintenance_card.dart';
+export 'material_card.dart';
+export 'presets_card.dart';
+export 'review_card.dart';

lib/src/pages/actions/detail/cards/advisor_card.dart

@@ -1,8 +1,8 @@
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class AdvisorCard extends StatelessWidget {
   const AdvisorCard({super.key, required this.massnahme});
@@ -11,6 +11,8 @@ class AdvisorCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -18,7 +20,7 @@ class AdvisorCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.tertiary,
+        color: theme.currentColorScheme.tertiary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -26,12 +28,12 @@ class AdvisorCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.advisor.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               Text(
                 'Max Mustermann',
-                style: baseTheme.currentThemeData.textTheme.bodyMedium,
+                style: theme.currentThemeData.textTheme.bodyMedium,
               ),
             ],
           ),

lib/src/pages/actions/detail/cards/background_card.dart

@@ -1,8 +1,8 @@
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class BackgroundCard extends StatelessWidget {
   const BackgroundCard({super.key, required this.massnahme});
@@ -11,6 +11,8 @@ class BackgroundCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -18,7 +20,7 @@ class BackgroundCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.secondary,
+        color: theme.currentColorScheme.secondary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -26,27 +28,27 @@ class BackgroundCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.background.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               Text(
                 context.translate('page.actionDetailPage.background.areaType'),
-                style: baseTheme.currentThemeData.textTheme.titleSmall,
+                style: theme.currentThemeData.textTheme.titleSmall,
               ),
-              baseTheme.verticalSpacerSmall,
+              theme.verticalSpacerSmall,
               Text(
                 massnahme.factsheetLocation.toString(),
-                style: baseTheme.currentThemeData.textTheme.bodyMedium,
+                style: theme.currentThemeData.textTheme.bodyMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               Text(
                 context.translate('page.actionDetailPage.background.target'),
-                style: baseTheme.currentThemeData.textTheme.titleSmall,
+                style: theme.currentThemeData.textTheme.titleSmall,
               ),
-              baseTheme.verticalSpacerSmall,
+              theme.verticalSpacerSmall,
               Text(
                 massnahme.factsheetTarget.toString(),
-                style: baseTheme.currentThemeData.textTheme.bodyMedium,
+                style: theme.currentThemeData.textTheme.bodyMedium,
               ),
             ],
           ),

lib/src/pages/actions/detail/cards/biodiverisity_card.dart

@@ -1,8 +1,8 @@
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class BiodiverisityCard extends StatelessWidget {
   const BiodiverisityCard({super.key, required this.massnahme});
@@ -11,6 +11,8 @@ class BiodiverisityCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -18,7 +20,7 @@ class BiodiverisityCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.secondary,
+        color: theme.currentColorScheme.secondary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -26,12 +28,12 @@ class BiodiverisityCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.biodiversity.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               Text(
                 massnahme.oekologischeRelevanzBackground.toString(),
-                style: baseTheme.currentThemeData.textTheme.bodyMedium,
+                style: theme.currentThemeData.textTheme.bodyMedium,
               ),
             ],
           ),

lib/src/pages/actions/detail/cards/creation_card.dart

@@ -1,8 +1,8 @@
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class CreationCard extends StatelessWidget {
   const CreationCard({super.key, required this.massnahme});
@@ -11,6 +11,8 @@ class CreationCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -18,7 +20,7 @@ class CreationCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.secondary,
+        color: theme.currentColorScheme.secondary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -26,21 +28,21 @@ class CreationCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.creation.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               Text(
                 context.translate('page.actionDetailPage.creation.timeFrame'),
-                style: baseTheme.currentThemeData.textTheme.titleSmall,
+                style: theme.currentThemeData.textTheme.titleSmall,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               Text(
                 massnahme.timeFrame
                         ?.map((item) => item.value)
                         .toList()
                         .join(', ') ??
                     '',
-                style: baseTheme.currentThemeData.textTheme.bodyMedium,
+                style: theme.currentThemeData.textTheme.bodyMedium,
               ),
             ],
           ),

lib/src/pages/actions/detail/cards/description_card.dart

@@ -1,8 +1,8 @@
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class DescriptionCard extends StatelessWidget {
   const DescriptionCard({super.key, required this.massnahme});
@@ -11,6 +11,8 @@ class DescriptionCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -18,7 +20,7 @@ class DescriptionCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.secondary,
+        color: theme.currentColorScheme.secondary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -26,12 +28,12 @@ class DescriptionCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.description.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               Text(
                 massnahme.factsheetDefinition ?? '',
-                style: baseTheme.currentThemeData.textTheme.bodyMedium,
+                style: theme.currentThemeData.textTheme.bodyMedium,
               ),
             ],
           ),

lib/src/pages/actions/detail/cards/factsheet_card.dart

@@ -0,0 +1,40 @@
+import 'package:ambito/src/extensions/extensions.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
+
+class FactsheetCard extends StatelessWidget {
+  const FactsheetCard({super.key, required this.massnahme});
+
+  final Measure massnahme;
+
+  @override
+  Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
+    return SizedBox(
+      width: double.infinity,
+      child: Card(
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(0),
+        ),
+        elevation: 0,
+        color: theme.currentColorScheme.tertiary,
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                context.translate('page.actionDetailPage.factsheet.title'),
+                style: theme.currentThemeData.textTheme.titleMedium,
+              ),
+              theme.verticalSpacer,
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/src/pages/actions/detail/cards/funding_card.dart

@@ -1,8 +1,8 @@
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class FundingCard extends StatelessWidget {
   const FundingCard({super.key, required this.massnahme});
@@ -11,6 +11,8 @@ class FundingCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -18,7 +20,7 @@ class FundingCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.secondary,
+        color: theme.currentColorScheme.secondary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -26,9 +28,9 @@ class FundingCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.funding.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
             ],
           ),
         ),

lib/src/pages/actions/detail/cards/maintenance_card.dart

@@ -1,8 +1,8 @@
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class MaintenanceCard extends StatelessWidget {
   const MaintenanceCard({super.key, required this.massnahme});
@@ -11,6 +11,8 @@ class MaintenanceCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -18,7 +20,7 @@ class MaintenanceCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.secondary,
+        color: theme.currentColorScheme.secondary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -26,9 +28,9 @@ class MaintenanceCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.maintenance.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
             ],
           ),
         ),

lib/src/pages/actions/detail/cards/material_card.dart

@@ -1,8 +1,8 @@
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class MaterialCard extends StatelessWidget {
   const MaterialCard({super.key, required this.massnahme});
@@ -11,6 +11,8 @@ class MaterialCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -18,7 +20,7 @@ class MaterialCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.tertiary,
+        color: theme.currentColorScheme.tertiary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -26,17 +28,17 @@ class MaterialCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.material.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               _getSortedMaterials(context),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               if (massnahme.costsMaterial != null)
                 Text(context.translate(
                         'page.actionDetailPage.material.suggested_price') +
                     massnahme.costsMaterial +
                     ' €'),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
             ],
           ),
         ),
@@ -45,6 +47,8 @@ class MaterialCard extends StatelessWidget {
   }
 
   _getSortedMaterials(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     List<String> items = [];
     if (massnahme.materialAction != null) {
       for (IdValueColor ivc in massnahme.materialAction!) {
@@ -56,10 +60,10 @@ class MaterialCard extends StatelessWidget {
     for (String item in items) {
       tiles.add(
         ListTile(
-          leading: Icon(Icons.fiber_manual_record),
+          leading: const Icon(Icons.fiber_manual_record),
           title: Text(
             item,
-            style: Theme.of(context).textTheme.bodyMedium,
+            style: theme.currentThemeData.textTheme.bodyMedium,
           ),
         ),
       );

lib/src/pages/actions/detail/cards/presets_card.dart

@@ -1,8 +1,8 @@
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class PresetsCard extends StatelessWidget {
   const PresetsCard({super.key, required this.massnahme});
@@ -11,6 +11,8 @@ class PresetsCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -18,7 +20,7 @@ class PresetsCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.secondary,
+        color: theme.currentColorScheme.secondary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -26,22 +28,22 @@ class PresetsCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.presets.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               Text(
                 massnahme.remarkablePresets.toString(),
-                style: baseTheme.currentThemeData.textTheme.bodyMedium,
+                style: theme.currentThemeData.textTheme.bodyMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               Text(
                 context.translate('page.actionDetailPage.presets.tips'),
-                style: baseTheme.currentThemeData.textTheme.titleSmall,
+                style: theme.currentThemeData.textTheme.titleSmall,
               ),
-              baseTheme.verticalSpacerSmall,
+              theme.verticalSpacerSmall,
               Text(
                 massnahme.tipsPresets.toString(),
-                style: baseTheme.currentThemeData.textTheme.bodyMedium,
+                style: theme.currentThemeData.textTheme.bodyMedium,
               ),
             ],
           ),

lib/src/pages/actions/detail/cards/review_card.dart

@@ -2,8 +2,8 @@ import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_rating_stars/flutter_rating_stars.dart';
 
-import '../../../../main.dart';
+import '../../../../entity/entities.dart';
-import '../../../entity/entities.dart';
+import '../../../../packages/ambito_theme/ambito_theme.dart';
 
 class ReviewCard extends StatelessWidget {
   const ReviewCard({super.key, required this.massnahme});
@@ -12,6 +12,8 @@ class ReviewCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final AmbitoTheme theme = getTheme(context);
+
     return SizedBox(
       width: double.infinity,
       child: Card(
@@ -19,7 +21,7 @@ class ReviewCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(0),
         ),
         elevation: 0,
-        color: baseTheme.currentColorScheme.tertiary,
+        color: theme.currentColorScheme.tertiary,
         child: Padding(
           padding: const EdgeInsets.all(16),
           child: Column(
@@ -27,9 +29,9 @@ class ReviewCard extends StatelessWidget {
             children: [
               Text(
                 context.translate('page.actionDetailPage.review.title'),
-                style: baseTheme.currentThemeData.textTheme.titleMedium,
+                style: theme.currentThemeData.textTheme.titleMedium,
               ),
-              baseTheme.verticalSpacer,
+              theme.verticalSpacer,
               RatingStars(
                 value: 4.5,
                 onValueChanged: (v) {},

lib/src/pages/calendar/calendar_page.dart

@@ -6,6 +6,7 @@ import 'package:ambito/src/extensions/extensions.dart';
 import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 import 'package:syncfusion_flutter_calendar/calendar.dart';
 
 import '../../consts/consts.dart';
@@ -64,6 +65,7 @@ class CalendarPageState extends State<CalendarPage> {
     return Scaffold(
       appBar: AmbitoAppbar(
         links: const ['dashboard', 'massnahmen'],
+        breakpoint: Breakpoint.fromContext(context),
       ),
       body: Center(
         child: Padding(

lib/src/pages/calendar/calendar_page_year.dart

@@ -2,6 +2,7 @@ import 'package:ambito/main.dart';
 import 'package:ambito/src/entity/_general/filter/item_filter.dart';
 import 'package:ambito/src/entity/measure/measure_repository.dart';
 import 'package:flutter/material.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 
 import '../../consts/consts.dart';
 import '../../widgets/appbar/ambito_appbar.dart';
@@ -35,7 +36,7 @@ class CalendarPageYearState extends State<CalendarPageYear> {
           padding: const EdgeInsets.all(8),
           child: Text(
             'Maßnahme',
-            style: baseTheme.currentThemeData.textTheme.titleMedium
+            style: largeTheme.currentThemeData.textTheme.titleMedium
                 ?.copyWith(fontWeight: FontWeight.bold, color: Colors.white),
           ),
         ),
@@ -48,7 +49,7 @@ class CalendarPageYearState extends State<CalendarPageYear> {
           child: Text(
             textAlign: TextAlign.center,
             month,
-            style: baseTheme.currentThemeData.textTheme.titleMedium
+            style: largeTheme.currentThemeData.textTheme.titleMedium
                 ?.copyWith(fontWeight: FontWeight.bold, color: Colors.white),
           ),
         ),
@@ -79,7 +80,7 @@ class CalendarPageYearState extends State<CalendarPageYear> {
                 child: Container(
                   width: double.infinity,
                   height: 44,
-                  color: baseTheme.currentColorScheme.primary,
+                  color: largeTheme.currentColorScheme.primary,
                 ),
               ),
             );
@@ -110,6 +111,7 @@ class CalendarPageYearState extends State<CalendarPageYear> {
     return Scaffold(
       appBar: AmbitoAppbar(
         links: const ['dashboard', 'massnahmen'],
+        breakpoint: Breakpoint.fromContext(context),
       ),
       body: Card(
         child: Column(

lib/src/pages/cart/cart_page.dart

@@ -6,6 +6,7 @@ import 'package:ambito/src/extensions/extensions.dart';
 import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
 import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 import 'package:syncfusion_flutter_calendar/calendar.dart';
 
 import '../../consts/consts.dart';
@@ -64,6 +65,7 @@ class CalendarPageState extends State<CalendarPage> {
     return Scaffold(
       appBar: AmbitoAppbar(
         links: const ['dashboard', 'massnahmen'],
+        breakpoint: Breakpoint.fromContext(context),
       ),
       body: Center(
         child: Padding(

lib/src/pages/dashboard/dashboard_page.dart

@@ -2,6 +2,7 @@ import 'package:ambito/src/packages/ambito_theme/ambito_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:percent_indicator/linear_percent_indicator.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 
 import '../../../main.dart';
 import '../../widgets/appbar/ambito_appbar.dart';
@@ -62,6 +63,7 @@ class DashboardPageState extends State<DashboardPage> {
     return Scaffold(
       appBar: AmbitoAppbar(
         links: const ['dashboard', 'massnahmen'],
+        breakpoint: Breakpoint.fromContext(context),
       ),
       body: SingleChildScrollView(
         child: Align(
@@ -73,22 +75,22 @@ class DashboardPageState extends State<DashboardPage> {
               mainAxisAlignment: MainAxisAlignment.start,
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                baseTheme.verticalSpacerMax,
+                largeTheme.verticalSpacerMax,
                 Text(
                   'Willkommen, Max Mustermann!',
                   textAlign: TextAlign.start,
-                  style: baseTheme.currentThemeData.textTheme.headlineLarge
+                  style: largeTheme.currentThemeData.textTheme.headlineLarge
                       ?.copyWith(
-                    color: baseTheme.currentColorScheme.onSurface,
+                    color: largeTheme.currentColorScheme.onSurface,
                   ),
                 ),
-                baseTheme.verticalSpacerMax,
+                largeTheme.verticalSpacerMax,
                 Wrap(
                   alignment: WrapAlignment.center,
                   spacing: 32,
                   children: cards,
                 ),
-                baseTheme.verticalSpacerMax,
+                largeTheme.verticalSpacerMax,
                 Row(
                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                   crossAxisAlignment: CrossAxisAlignment.start,
@@ -101,19 +103,18 @@ class DashboardPageState extends State<DashboardPage> {
                           Text(
                             'Biodiversitätsbewertung',
                             textAlign: TextAlign.start,
-                            style: baseTheme
+                            style: largeTheme
                                 .currentThemeData.textTheme.headlineMedium
                                 ?.copyWith(
-                              color: baseTheme.currentColorScheme.onSurface,
+                              color: largeTheme.currentColorScheme.onSurface,
                             ),
                           ),
-                          baseTheme.verticalSpacer,
+                          largeTheme.verticalSpacer,
                           SizedBox(
                             width: 532,
                             child: Card(
-                              elevation: 4,
+                              elevation: 0,
-                              surfaceTintColor:
+                              color: orangeColors['primary']?.withOpacity(0.1),
-                                  orangeColors['primary']?.withOpacity(0.3),
                               child: Padding(
                                 padding: const EdgeInsets.all(16),
                                 child: Column(
@@ -122,14 +123,14 @@ class DashboardPageState extends State<DashboardPage> {
                                     Text(
                                       'Fragebögen',
                                       textAlign: TextAlign.left,
-                                      style: baseTheme.currentThemeData
+                                      style: largeTheme.currentThemeData
                                           .textTheme.headlineSmall
                                           ?.copyWith(
                                         color: orangeColors['primary'],
                                         fontWeight: FontWeight.bold,
                                       ),
                                     ),
-                                    baseTheme.verticalSpacerSmall,
+                                    largeTheme.verticalSpacerSmall,
                                     Row(
                                       children: [
                                         LinearPercentIndicator(
@@ -138,7 +139,7 @@ class DashboardPageState extends State<DashboardPage> {
                                           animation: true,
                                           percent: 0.8,
                                           padding: EdgeInsets.zero,
-                                          backgroundColor: baseTheme
+                                          backgroundColor: largeTheme
                                               .currentColorScheme.surface,
                                           progressColor:
                                               orangeColors['primary'],
@@ -165,14 +166,14 @@ class DashboardPageState extends State<DashboardPage> {
                                         ),
                                       ],
                                     ),
-                                    baseTheme.verticalSpacerSmall,
+                                    largeTheme.verticalSpacerSmall,
                                     Text(
                                       '4 / 5 abgeschlossen',
                                       textAlign: TextAlign.start,
-                                      style: baseTheme
+                                      style: largeTheme
                                           .currentThemeData.textTheme.bodyLarge
                                           ?.copyWith(
-                                        color: baseTheme
+                                        color: largeTheme
                                             .currentColorScheme.onSurface,
                                       ),
                                     ),
@@ -181,7 +182,7 @@ class DashboardPageState extends State<DashboardPage> {
                               ),
                             ),
                           ),
-                          baseTheme.verticalSpacer,
+                          largeTheme.verticalSpacer,
                           SizedBox(
                             width: 532,
                             child: Card(
@@ -196,14 +197,14 @@ class DashboardPageState extends State<DashboardPage> {
                                     Text(
                                       'Ergebnisse',
                                       textAlign: TextAlign.left,
-                                      style: baseTheme.currentThemeData
+                                      style: largeTheme.currentThemeData
                                           .textTheme.headlineSmall
                                           ?.copyWith(
                                         color: greenColors['primary'],
                                         fontWeight: FontWeight.bold,
                                       ),
                                     ),
-                                    baseTheme.verticalSpacerSmall,
+                                    largeTheme.verticalSpacerSmall,
                                     Row(
                                       children: [
                                         LinearPercentIndicator(
@@ -212,25 +213,25 @@ class DashboardPageState extends State<DashboardPage> {
                                           animation: true,
                                           percent: 0.8,
                                           padding: EdgeInsets.zero,
-                                          backgroundColor: baseTheme
+                                          backgroundColor: largeTheme
                                               .currentColorScheme.surface,
                                           progressColor: greenColors['primary'],
                                           barRadius: const Radius.circular(8),
                                         ),
                                       ],
                                     ),
-                                    baseTheme.verticalSpacerSmall,
+                                    largeTheme.verticalSpacerSmall,
                                     Text(
                                       'Weinberg: 80%',
                                       textAlign: TextAlign.start,
-                                      style: baseTheme
+                                      style: largeTheme
                                           .currentThemeData.textTheme.bodyLarge
                                           ?.copyWith(
-                                        color: baseTheme
+                                        color: largeTheme
                                             .currentColorScheme.onSurface,
                                       ),
                                     ),
-                                    baseTheme.verticalSpacerSmall,
+                                    largeTheme.verticalSpacerSmall,
                                     Row(
                                       children: [
                                         LinearPercentIndicator(
@@ -239,25 +240,25 @@ class DashboardPageState extends State<DashboardPage> {
                                           animation: true,
                                           percent: 0.52,
                                           padding: EdgeInsets.zero,
-                                          backgroundColor: baseTheme
+                                          backgroundColor: largeTheme
                                               .currentColorScheme.surface,
                                           progressColor: greenColors['primary'],
                                           barRadius: const Radius.circular(8),
                                         ),
                                       ],
                                     ),
-                                    baseTheme.verticalSpacerSmall,
+                                    largeTheme.verticalSpacerSmall,
                                     Text(
                                       'Landschaft: 52%',
                                       textAlign: TextAlign.start,
-                                      style: baseTheme
+                                      style: largeTheme
                                           .currentThemeData.textTheme.bodyLarge
                                           ?.copyWith(
-                                        color: baseTheme
+                                        color: largeTheme
                                             .currentColorScheme.onSurface,
                                       ),
                                     ),
-                                    baseTheme.verticalSpacerSmall,
+                                    largeTheme.verticalSpacerSmall,
                                     Row(
                                       children: [
                                         LinearPercentIndicator(
@@ -266,21 +267,21 @@ class DashboardPageState extends State<DashboardPage> {
                                           animation: true,
                                           percent: 0.27,
                                           padding: EdgeInsets.zero,
-                                          backgroundColor: baseTheme
+                                          backgroundColor: largeTheme
                                               .currentColorScheme.surface,
                                           progressColor: greenColors['primary'],
                                           barRadius: const Radius.circular(8),
                                         ),
                                       ],
                                     ),
-                                    baseTheme.verticalSpacerSmall,
+                                    largeTheme.verticalSpacerSmall,
                                     Text(
                                       'Betriebsstätte: 27%',
                                       textAlign: TextAlign.start,
-                                      style: baseTheme
+                                      style: largeTheme
                                           .currentThemeData.textTheme.bodyLarge
                                           ?.copyWith(
-                                        color: baseTheme
+                                        color: largeTheme
                                             .currentColorScheme.onSurface,
                                       ),
                                     ),
@@ -302,28 +303,28 @@ class DashboardPageState extends State<DashboardPage> {
                           Text(
                             'Förderungen',
                             textAlign: TextAlign.start,
-                            style: baseTheme
+                            style: largeTheme
                                 .currentThemeData.textTheme.headlineMedium
                                 ?.copyWith(
-                              color: baseTheme.currentColorScheme.onSurface,
+                              color: largeTheme.currentColorScheme.onSurface,
                             ),
                           ),
-                          baseTheme.verticalSpacer,
+                          largeTheme.verticalSpacer,
                           Text(
                             'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
                             textAlign: TextAlign.start,
-                            style: baseTheme
+                            style: largeTheme
                                 .currentThemeData.textTheme.bodyLarge
                                 ?.copyWith(
-                              color: baseTheme.currentColorScheme.onSurface,
+                              color: largeTheme.currentColorScheme.onSurface,
                             ),
                           ),
-                          baseTheme.verticalSpacer,
+                          largeTheme.verticalSpacer,
                           _buildProjectCard(
                             'Projekt A',
                             'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
                           ),
-                          baseTheme.verticalSpacer,
+                          largeTheme.verticalSpacer,
                           _buildProjectCard(
                             'Projekt B',
                             'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.',
@@ -350,12 +351,12 @@ class DashboardPageState extends State<DashboardPage> {
         width: 262,
         height: 250,
         child: Card(
-          elevation: 4,
+          elevation: 0,
-          surfaceTintColor: Colors.white,
+          color: const Color(0xff666666).withOpacity(.1),
           child: Column(
             children: [
               ClipRRect(
-                borderRadius: BorderRadius.circular(8.0),
+                borderRadius: BorderRadius.circular(4.0),
                 child: Image.asset(
                   image,
                 ),
@@ -365,7 +366,7 @@ class DashboardPageState extends State<DashboardPage> {
                   child: Text(
                     title,
                     textAlign: TextAlign.center,
-                    style: baseTheme.currentThemeData.textTheme.headlineSmall
+                    style: largeTheme.currentThemeData.textTheme.headlineSmall
                         ?.copyWith(
                       color: const Color(0xFF666666),
                       fontWeight: FontWeight.bold,
@@ -394,13 +395,13 @@ class DashboardPageState extends State<DashboardPage> {
               Text(
                 title,
                 textAlign: TextAlign.center,
-                style: baseTheme.currentThemeData.textTheme.headlineSmall
+                style: largeTheme.currentThemeData.textTheme.headlineSmall
                     ?.copyWith(
                   color: greenColors['primary'],
                   fontWeight: FontWeight.bold,
                 ),
               ),
-              baseTheme.verticalSpacerSmall,
+              largeTheme.verticalSpacerSmall,
               Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
@@ -411,9 +412,9 @@ class DashboardPageState extends State<DashboardPage> {
                       overflow: TextOverflow.ellipsis,
                       maxLines: 3,
                       textAlign: TextAlign.start,
-                      style: baseTheme.currentThemeData.textTheme.bodyLarge
+                      style: largeTheme.currentThemeData.textTheme.bodyLarge
                           ?.copyWith(
-                        color: baseTheme.currentColorScheme.onSurface,
+                        color: largeTheme.currentColorScheme.onSurface,
                       ),
                     ),
                   ),

lib/src/pages/start/start_page.dart

@@ -6,6 +6,7 @@ import 'package:ambito/src/widgets/appbar/ambito_appbar.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_breadcrumb/flutter_breadcrumb.dart';
 import 'package:get/get.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 
 import '../../../main.dart';
 
@@ -36,7 +37,9 @@ class StartPageState extends State<StartPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-        appBar: AmbitoAppbar(),
+        appBar: AmbitoAppbar(
+          breakpoint: Breakpoint.fromContext(context),
+        ),
         body: Column(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [

lib/src/widgets/appbar/ambito_appbar.dart

@@ -2,16 +2,18 @@ import 'package:ambito/main.dart';
 import 'package:ambito/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:screen_breakpoints/screen_breakpoints.dart';
 
 class AmbitoAppbar extends AppBar {
-  AmbitoAppbar({super.key, List<String>? links})
+  AmbitoAppbar({super.key, List<String>? links, required Breakpoint breakpoint})
       : super(
           automaticallyImplyLeading: false,
           leading: Padding(
             padding: const EdgeInsets.all(8),
             child: Hero(
               tag: 'logo',
-              child: GestureDetector(
+              child: InkWell(
+                onHover: (value) {},
                 onTap: () {
                   Get.toNamed('/');
                 },
@@ -28,33 +30,46 @@ class AmbitoAppbar extends AppBar {
             builder: (context) => _links(context, links),
           ),
           toolbarHeight: 80,
-          backgroundColor: baseTheme.currentColorScheme.primaryContainer,
+          backgroundColor: largeTheme.currentColorScheme.primaryContainer,
           actions: [
+            Text(breakpoint.breakpoint.toString()),
             IconButton(
               onPressed: () {
-                Get.toNamed('/kalender/jahr');
+                Get.toNamed('/');
               },
               icon: Icon(
-                Icons.calendar_view_month,
+                Icons.notifications,
-                color: baseTheme.currentColorScheme.primary,
+                color: largeTheme.currentColorScheme.primary,
               ),
             ),
-            IconButton(
+            if (breakpoint >= myBreakpoints.md)
-              onPressed: () {
+              IconButton(
-                Get.toNamed('/kalender');
+                onPressed: () {
-              },
+                  Get.toNamed('/kalender/jahr');
-              icon: Icon(
+                },
-                Icons.calendar_month,
+                icon: Icon(
-                color: baseTheme.currentColorScheme.primary,
+                  Icons.calendar_view_month,
+                  color: largeTheme.currentColorScheme.primary,
+                ),
               ),
-            ),
+            if (breakpoint >= myBreakpoints.md)
-            IconButton(
+              IconButton(
-              onPressed: () {},
+                onPressed: () {
-              icon: Icon(
+                  Get.toNamed('/kalender');
-                Icons.person,
+                },
-                color: baseTheme.currentColorScheme.primary,
+                icon: Icon(
+                  Icons.calendar_month,
+                  color: largeTheme.currentColorScheme.primary,
+                ),
+              ),
+            if (breakpoint >= myBreakpoints.md)
+              IconButton(
+                onPressed: () {},
+                icon: Icon(
+                  Icons.person,
+                  color: largeTheme.currentColorScheme.primary,
+                ),
               ),
-            ),
             const SizedBox(
               width: 30,
             )
@@ -63,7 +78,11 @@ class AmbitoAppbar extends AppBar {
 
   static Widget _links(BuildContext context, List<String>? links) {
     List<Widget> linkButtons = [];
-    if (links != null && links.isNotEmpty) {
+    logger.d(context.breakpoint.breakpoint);
+    logger.d(myBreakpoints.sm?.breakpoint);
+    if (context.breakpoint.breakpoint >= myBreakpoints.md!.breakpoint &&
+        links != null &&
+        links.isNotEmpty) {
       for (String link in links) {
         linkButtons.add(_linkButton(context, link));
       }

lib/src/widgets/form/fields/field_title.dart

@@ -16,7 +16,7 @@ class FieldTitle extends FormWidgetField {
       child: Text(
         text,
         textAlign: TextAlign.start,
-        style: baseTheme.currentThemeData.textTheme.titleLarge,
+        style: largeTheme.currentThemeData.textTheme.titleLarge,
       ),
     );
   }

pubspec.lock

@@ -270,6 +270,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.0"
+  equatable:
+    dependency: transitive
+    description:
+      name: equatable
+      sha256: c2b87cb7756efdf69892005af546c56c0b5037f54d2a88269b4f347a505e3ca2
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.5"
   expandable_text:
     dependency: "direct main"
     description:
@@ -754,6 +762,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.0"
+  nested:
+    dependency: transitive
+    description:
+      name: nested
+      sha256: "03bac4c528c64c95c722ec99280375a6f2fc708eec17c7b3f07253b626cd2a20"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
   octo_image:
     dependency: transitive
     description:
@@ -946,6 +962,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.0"
+  provider:
+    dependency: "direct main"
+    description:
+      name: provider
+      sha256: c8a055ee5ce3fd98d6fc872478b03823ffdb448699c6ebdbbc71d59b596fd48c
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.1.2"
   pub_semver:
     dependency: transitive
     description:
@@ -970,6 +994,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.28.0"
+  screen_breakpoints:
+    dependency: "direct main"
+    description:
+      name: screen_breakpoints
+      sha256: e8a9f647bfcaa3ae15aa4d4c15dd95f586227b2758b1eddc51aeb09098f5c70d
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.5"
   shared_preferences:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -53,6 +53,8 @@ dependencies:
   timezone: ^0.9.4
   percent_indicator: ^4.2.3
   image_downloader_web: ^2.0.6
+  screen_breakpoints: ^1.0.5
+  provider: ^6.1.2
 
 
 dev_dependencies: