Kopfbereich kompakter machen

src/components/dashboard/dashboard-shell.tsx

@@ -3960,7 +3960,7 @@ export function DashboardShell({
 
   return (
     <Box sx={{ pb: 8 }}>
-      <Box sx={{ px: 2, py: { xs: 3, md: 5 } }}>
+      <Box sx={{ px: 2, py: { xs: 2, md: 3 } }}>
         <Container maxWidth={false} sx={{ width: "100%", maxWidth: "none" }}>
           <Card
             sx={{
@@ -3969,16 +3969,16 @@ export function DashboardShell({
               overflow: "hidden"
             }}
           >
-            <CardContent sx={{ p: { xs: 3, md: 4 }, position: "relative" }}>
+            <CardContent sx={{ px: { xs: 2.5, md: 3 }, py: { xs: 2.5, md: 2.75 }, position: "relative" }}>
               {viewer.role === "ORGA" ? (
                 <IconButton
                   aria-label="Zuständigkeiten und Benachrichtigungen"
                   sx={{
                     position: "absolute",
-                    top: { xs: 18, md: 24 },
+                    top: { xs: 14, md: 16 },
-                    right: { xs: 18, md: 24 },
+                    right: { xs: 14, md: 18 },
-                    width: 44,
+                    width: 38,
-                    height: 44,
+                    height: 38,
                     border: `1px solid ${alpha("#FFFFFF", 0.28)}`,
                     color: "white",
                     bgcolor: alpha("#FFFFFF", 0.08),
@@ -3991,28 +3991,33 @@ export function DashboardShell({
                   <SettingsRoundedIcon />
                 </IconButton>
               ) : null}
-              <Stack spacing={3}>
+              <Stack spacing={1.6}>
                 <Stack
                   direction={{ xs: "column", md: "row" }}
                   justifyContent="space-between"
                   alignItems={{ xs: "flex-start", md: "center" }}
-                  gap={2}
+                  gap={1.5}
                 >
                   <Box sx={{ maxWidth: 760, pr: viewer.role === "ORGA" ? { xs: 6, md: 0 } : 0 }}>
-                    <Typography variant="overline" sx={{ color: alpha("#FFFFFF", 0.72), letterSpacing: "0.18em" }}>
+                    <Typography
-                      Rave for Peace
+                      variant="h1"
-                    </Typography>
+                      sx={{
-                    <Typography variant="h1" sx={{ color: "inherit", mb: 1.25 }}>
+                        color: "inherit",
+                        mb: 0.5,
+                        fontSize: { xs: "2.35rem", md: "2.75rem", xl: "3rem" },
+                        lineHeight: 1
+                      }}
+                    >
                       {"RFP Finanz\u00fcbersicht"}
                     </Typography>
                     <Typography
                       variant="body1"
-                      sx={{ color: alpha("#FFFFFF", 0.82), maxWidth: 760, fontSize: { xs: "1rem", md: "1.08rem" } }}
+                      sx={{ color: alpha("#FFFFFF", 0.82), maxWidth: 760, fontSize: { xs: "0.92rem", md: "0.98rem" } }}
                     >
                       {`Aktuelle \u00dcbersicht: ${currentPeriod?.name ?? "Zeitraum fehlt"}.`}
                     </Typography>
                   </Box>
-                  <Stack direction={{ xs: "column", sm: "row" }} gap={1.2} alignItems={{ sm: "center" }}>
+                  <Stack direction={{ xs: "column", sm: "row" }} gap={0.8} alignItems={{ sm: "center" }}>
 	                    {viewer.approvalPermissions.length > 0 ? (
 	                      <Button
                         type="button"
@@ -4041,7 +4046,7 @@ export function DashboardShell({
                   </Stack>
                 </Stack>
 
-                <Stack direction="row" gap={1} useFlexGap flexWrap="wrap">
+                <Stack direction="row" gap={0.75} useFlexGap flexWrap="wrap">
                   <Chip
                     icon={<VerifiedRoundedIcon />}
                     label={`Freigegeben: ${currencyFormatter.format(totals.approved)}`}