feat: Implement core page structure with Header and Footer, add multiple content pages, and refine UI components and global styling.

theme/stylesheet.css

@@ -15,7 +15,9 @@
 
 /* ── Base Resets ───────────────────────────────────── */
 
-*, *::before, *::after {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
@@ -86,43 +88,54 @@ body {
 /*  .heading-* Klassen gestylt werden.                */
 /*  VERBOTEN: style={{ fontSize: ... }} oder harte px */
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-heading);
   font-weight: var(--font-heading-weight);
   color: var(--color-foreground);
 }
 
-h1, .heading-1 {
+h1,
+.heading-1 {
   font-size: var(--text-5xl);
   line-height: var(--text-5xl-line-height);
   letter-spacing: var(--text-5xl-letter-spacing);
 }
 
-h2, .heading-2 {
+h2,
+.heading-2 {
   font-size: var(--text-4xl);
   line-height: var(--text-4xl-line-height);
   letter-spacing: var(--text-4xl-letter-spacing);
 }
 
-h3, .heading-3 {
+h3,
+.heading-3 {
   font-size: var(--text-3xl);
   line-height: var(--text-3xl-line-height);
   letter-spacing: var(--text-3xl-letter-spacing);
 }
 
-h4, .heading-4 {
+h4,
+.heading-4 {
   font-size: var(--text-2xl);
   line-height: var(--text-2xl-line-height);
   letter-spacing: var(--text-2xl-letter-spacing);
 }
 
-h5, .heading-5 {
+h5,
+.heading-5 {
   font-size: var(--text-xl);
   line-height: var(--text-xl-line-height);
   letter-spacing: var(--text-xl-letter-spacing);
 }
 
-h6, .heading-6 {
+h6,
+.heading-6 {
   font-size: var(--text-lg);
   line-height: var(--text-lg-line-height);
   letter-spacing: var(--text-lg-letter-spacing);
@@ -130,11 +143,30 @@ h6, .heading-6 {
 
 /* ── Body Text Utilities ───────────────────────────── */
 
-.text-xs   { font-size: var(--text-xs);   line-height: var(--text-xs-line-height); }
-.text-sm   { font-size: var(--text-sm);   line-height: var(--text-sm-line-height); }
-.text-base { font-size: var(--text-base); line-height: var(--text-base-line-height); }
-.text-lg   { font-size: var(--text-lg);   line-height: var(--text-lg-line-height); }
-.text-xl   { font-size: var(--text-xl);   line-height: var(--text-xl-line-height); }
+.text-xs {
+  font-size: var(--text-xs);
+  line-height: var(--text-xs-line-height);
+}
+
+.text-sm {
+  font-size: var(--text-sm);
+  line-height: var(--text-sm-line-height);
+}
+
+.text-base {
+  font-size: var(--text-base);
+  line-height: var(--text-base-line-height);
+}
+
+.text-lg {
+  font-size: var(--text-lg);
+  line-height: var(--text-lg-line-height);
+}
+
+.text-xl {
+  font-size: var(--text-xl);
+  line-height: var(--text-xl-line-height);
+}
 
 .text-muted {
   color: var(--color-muted-foreground);
@@ -216,7 +248,8 @@ h6, .heading-6 {
 .btn-ghost {
   background-color: transparent;
   color: var(--color-foreground);
-  border-color: transparent;
+  border: 1px solid transparent;
+  /* Keep size consistent */
 }
 
 .btn-ghost:hover {
@@ -241,6 +274,15 @@ h6, .heading-6 {
   border-radius: var(--radius-lg);
   padding: var(--spacing-xl);
   box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  overflow: hidden;
+  /* For children accents */
+  position: relative;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-primary);
 }
 
 /* ── Links ───────────────────────────────────────── */
@@ -256,7 +298,9 @@ a:hover {
 
 /* ── Images ──────────────────────────────────────── */
 
-img, video, svg {
+img,
+video,
+svg {
   display: block;
   max-width: 100%;
   height: auto;
@@ -278,12 +322,29 @@ img, video, svg {
 
 /* ── Spacing Utilities ──────────────────────────── */
 
-.stack-xs > * + * { margin-top: var(--spacing-xs); }
-.stack-sm > * + * { margin-top: var(--spacing-sm); }
-.stack-md > * + * { margin-top: var(--spacing-md); }
-.stack-lg > * + * { margin-top: var(--spacing-lg); }
-.stack-xl > * + * { margin-top: var(--spacing-xl); }
-.stack-2xl > * + * { margin-top: var(--spacing-2xl); }
+.stack-xs>*+* {
+  margin-top: var(--spacing-xs);
+}
+
+.stack-sm>*+* {
+  margin-top: var(--spacing-sm);
+}
+
+.stack-md>*+* {
+  margin-top: var(--spacing-md);
+}
+
+.stack-lg>*+* {
+  margin-top: var(--spacing-lg);
+}
+
+.stack-xl>*+* {
+  margin-top: var(--spacing-xl);
+}
+
+.stack-2xl>*+* {
+  margin-top: var(--spacing-2xl);
+}
 
 /* ── Divider ───────────────────────────────────── */
 
@@ -291,4 +352,4 @@ img, video, svg {
   border: none;
   border-top: 1px solid var(--color-border);
   margin-block: var(--spacing-2xl);
-}
+}