Add the design foundation: self-hosted Nunito, type scale, new tokens and an Icon component

Elternbeirat.Web/wwwroot/app.css

@@ -23,6 +23,20 @@
     --color-accent: #6db863;
     --color-accent-dark: #4f9247;
 
+    /* A whisper of the green for calm background areas (info boxes, highlighted
+       rows). Light enough that body text keeps its full contrast on top. */
+    --color-accent-tint: #eef7ec;
+
+    /* Warm yellow for the rare thing that must catch the eye (a "new" marker, a
+       deadline). Background only, never text -- yellow text is unreadable on white.
+       Used sparingly: if everything is highlighted, nothing is. */
+    --color-highlight: #fdf0c2;
+
+    /* Brand gradient for large surfaces (hero, banner): the header blue flowing into
+       the IGMH green. The green end is a deep shade (#3a7a3e, 5.2:1 with white),
+       not --color-accent, so white text stays readable across the whole sweep. */
+    --gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #3a7a3e 100%);
+
     /* Headings. Its own token (not --color-brand) so headings and links can differ:
        in dark mode headings become a soft white while links keep the brand blue. */
     --color-heading: #2b6f9c;
@@ -48,14 +62,38 @@
     /* Rounded corners and a soft shadow for cards, matching the friendly tone. */
     --radius: 12px;
     --radius-sm: 6px;
+    --radius-lg: 20px;             /* large surfaces (hero, banner) look stiff with
+                                      the card radius at their size */
     --shadow: 0 1px 3px rgba(31, 58, 95, 0.08), 0 4px 12px rgba(31, 58, 95, 0.06);
     --shadow-hover: 0 2px 6px rgba(31, 58, 95, 0.12), 0 8px 20px rgba(31, 58, 95, 0.1);
+    --shadow-lg: 0 4px 12px rgba(31, 58, 95, 0.1), 0 16px 40px rgba(31, 58, 95, 0.12);
 
     /* One transition speed for hovers/focus across the site. */
     --transition: 0.15s ease;
 
-    /* Reading width, so long text lines never get uncomfortably wide. */
-    --content-width: 60rem;
+    /* Width of the page frame (header, content, footer). Wide enough for card grids
+       side by side; running text does not follow it -- paragraphs keep their own
+       reading width (see p below), so lines never get uncomfortably long. */
+    --content-width: 72rem;
+
+    /* Type. The site font is self-hosted (see @font-face below); the system stack
+       stays behind it, so text shows at once and only swaps when Nunito arrives. */
+    --font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+
+    /* Type scale. h1 and h2 grow fluidly with the viewport (clamp: minimum, preferred
+       in vw, maximum) instead of jumping at a breakpoint, so a long German compound
+       word in a heading still fits a phone screen. Smaller sizes stay fixed: the
+       difference would not be visible. Body text sits a touch above the 1rem default
+       because Nunito's rounded letters read small. */
+    --font-size-h1: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
+    --font-size-h2: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);
+    --font-size-h3: 1.2rem;
+    --font-size-body: 1.0625rem;
+
+    /* Headings: extra-bold for a friendly, confident lead, pulled slightly tighter
+       because heavy letters at large sizes otherwise look spaced out. */
+    --font-weight-heading: 800;
+    --letter-spacing-heading: -0.015em;
 }
 
 /* Dark mode: follows the visitor's OS setting automatically (prefers-color-scheme).
@@ -77,6 +115,13 @@
 
         --color-accent: #86c97d;       /* the IGMH green nudged brighter for dark */
         --color-accent-dark: #86c97d;  /* no darkening needed on a dark surface */
+        --color-accent-tint: #24332a;  /* a dark green-grey: tinted, but the soft
+                                          body text still reads at 5.5:1 */
+
+        --color-highlight: #3a3220;    /* the warm yellow as a deep amber -- a bright
+                                          yellow would glare on the dark page */
+
+        --gradient-brand: linear-gradient(135deg, var(--color-header) 0%, #2f6b33 100%);
 
         --color-heading: #c9ced6;      /* soft white, kept a step brighter than the
                                           body text so headings still lead the page */
@@ -91,12 +136,30 @@
 
         --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
         --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.4);
+        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.45);
     }
 }
 
-/* Base styles. Self-hosted system font stack — no external fonts, for privacy. */
+/* Nunito, served from our own wwwroot -- never from Google Fonts, which would hand
+   every visitor's IP to Google (see docs/recht.md). One variable file covers every
+   weight from 400 to 800, so body, bold and headings cost a single ~36 KB request
+   instead of three static files. Subset to Latin incl. German and the common
+   European names (ä ö ü ß é ç ğ ş ł ...), € and German quotes; anything outside falls
+   back to the system font. No italic file: Markdown emphasis is rare, so the browser
+   slanting the upright face is worth the saved request. font-display: swap shows the
+   system font immediately and swaps once the file is there -- text never waits.
+   License: SIL OFL 1.1, see fonts/OFL.txt. */
+@font-face {
+    font-family: "Nunito";
+    src: url("fonts/nunito-latin-wght.woff2") format("woff2");
+    font-weight: 400 800;
+    font-style: normal;
+    font-display: swap;
+}
+
+/* Base styles. */
 html {
-    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-family: var(--font-family);
     line-height: 1.65;
     color: var(--color-text);
     /* Tell the browser we support both schemes, so form controls, scrollbars and
@@ -112,6 +175,7 @@ body {
     /* A soft tinted page background so white cards/content lift off it. */
     background: var(--color-page);
     color: var(--color-text);
+    font-size: var(--font-size-body);
 }
 
 a {
@@ -129,26 +193,31 @@ a:hover {
 h1, h2, h3, h4 {
     line-height: 1.25;
     color: var(--color-heading);
+    font-weight: var(--font-weight-heading);
+    letter-spacing: var(--letter-spacing-heading);
     margin: var(--space-5) 0 var(--space-3);
 }
 
 h1 {
-    font-size: 1.5rem;
+    font-size: var(--font-size-h1);
+    line-height: 1.15;   /* big type needs less leading, or wrapped lines drift apart */
     margin-top: 0;   /* the first heading on a page needs no gap above */
 }
 
 h2 {
-    font-size: 1.2rem;
+    font-size: var(--font-size-h2);
 }
 
 h3 {
-    font-size: 1.05rem;
+    font-size: var(--font-size-h3);
 }
 
 /* h4 gets its own size so it stays a step below h3 instead of falling back to the
-   browser default, which can render as large as (or larger than) a small h3. */
+   browser default, which can render as large as (or larger than) a small h3. Body
+   size: below that it would read smaller than the text it heads; the extra-bold
+   weight alone sets it apart. */
 h4 {
-    font-size: 0.95rem;
+    font-size: var(--font-size-body);
 }
 
 /* Comfortable paragraph rhythm and a capped line length for readability. */
@@ -161,6 +230,14 @@ h1:focus {
     outline: none;
 }
 
+/* Icons (Shared/Icon.razor) sit inline next to text: nudged down to line up with the
+   letters instead of the baseline, and never squeezed when they share a flex row
+   with a long label. */
+.icon {
+    flex-shrink: 0;
+    vertical-align: -0.15em;
+}
+
 /* Header navigation links. These live here (global), not in MainLayout.razor.css:
    NavLink renders plain <a> elements without a scoped-CSS attribute, so a scoped
    ".main-nav a" rule would not match them -- the links would fall back to the