Apply linen design system across app

src/app/dashboard/erzieher/page.tsx

@@ -20,21 +20,36 @@ export default async function ErzieherPage() {
     },
     orderBy: [{ lastName: "asc" }, { firstName: "asc" }],
   });
+  const activeCount = educators.filter((educator) => educator.active).length;
 
   return (
-    <div className="flex h-full flex-col gap-6 p-6">
-      <div className="flex items-start justify-between gap-4">
+    <div className="mx-auto max-w-[1280px] px-11 py-9 pb-16 max-[760px]:px-5">
+      <header className="mb-7 flex items-end justify-between gap-8 max-[900px]:flex-col max-[900px]:items-start">
         <div>
-          <h1 className="flex items-center gap-2 text-2xl font-bold tracking-tight">
-            <GraduationCap className="h-6 w-6 text-primary" />
-            ErzieherInnen-Verwaltung
+          <p className="text-[11px] font-semibold uppercase text-[var(--accent-deep)] [letter-spacing:0.18em]">
+            VERWALTUNG · TEAM
+          </p>
+          <h1 className="mt-2 text-[36px] font-normal leading-tight tracking-[-0.025em] text-[var(--ink)]">
+            ErzieherInnen{" "}
+            <em className="font-normal italic text-[var(--accent-deep)]">
+              verwalten
+            </em>
           </h1>
-          <p className="mt-1 max-w-2xl text-sm text-muted-foreground">
+          <p className="mt-2 max-w-2xl text-[15px] leading-6 text-[var(--ink-soft)]">
             Stammdaten des Kita-Personals für interne Planung und spätere
             Notdienst-Alarmierung.
           </p>
         </div>
-      </div>
+        <div className="flex shrink-0 flex-wrap gap-2">
+          <span className="inline-flex h-9 items-center gap-2 rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            <GraduationCap className="h-4 w-4 text-[var(--accent-deep)] [stroke-width:1.7]" />
+            {educators.length} im Team
+          </span>
+          <span className="inline-flex h-9 items-center rounded-full border border-[var(--hairline)] bg-[var(--surface)] px-3 text-[13px] font-semibold text-[var(--ink-soft)]">
+            {activeCount} aktiv
+          </span>
+        </div>
+      </header>
 
       <ErzieherList educators={educators} />
     </div>