feat: Introduce new service pages for 'Leistungen', 'Telefonie', 'Fernsehen', and 'Internet', accompanied by new layout components and image assets.

components/layout/Section.tsx

@@ -1,20 +1,32 @@
 import type { ElementType, ReactNode } from "react";
 
+type SectionVariant = "default" | "sm" | "lg" | "hero" | "flush";
+
 interface SectionProps {
   children: ReactNode;
   className?: string;
   as?: ElementType;
+  variant?: SectionVariant;
+  id?: string;
 }
 
+const variantClasses: Record<SectionVariant, string> = {
+  default: "section",
+  sm: "section section--sm",
+  lg: "section section--lg",
+  hero: "section section--hero",
+  flush: "section section--flush",
+};
+
 export function Section({
   children,
   className = "",
   as: Tag = "section",
+  variant = "default",
+  id,
 }: SectionProps) {
   return (
-    <Tag
-      className={`py-[var(--section-spacing-y)] ${className}`.trim()}
-    >
+    <Tag id={id} className={`${variantClasses[variant]} ${className}`.trim()}>
       {children}
     </Tag>
   );