refactor: update Typography components across multiple files to improve consistency in heading levels and styles

src/components/ProductDetailPage.js

@@ -581,7 +581,7 @@ class ProductDetailPage extends Component {
             minHeight: "60vh",
           }}
         >
-          <Typography variant="h5" gutterBottom>
+          <Typography variant="h2" component="h2" gutterBottom>
             Produkt wird geladen...
           </Typography>
         </Box>
@@ -591,7 +591,7 @@ class ProductDetailPage extends Component {
     if (error) {
       return (
         <Box sx={{ p: 4, textAlign: "center" }}>
-          <Typography variant="h5" gutterBottom color="error">
+          <Typography variant="h2" component="h2" gutterBottom color="error">
             Fehler
           </Typography>
           <Typography>{error}</Typography>
@@ -607,7 +607,7 @@ class ProductDetailPage extends Component {
     if (!product) {
       return (
         <Box sx={{ p: 4, textAlign: "center" }}>
-          <Typography variant="h5" gutterBottom>
+          <Typography variant="h2" component="h2" gutterBottom>
             Produkt nicht gefunden
           </Typography>
           <Typography>
@@ -856,7 +856,7 @@ class ProductDetailPage extends Component {
               >
                 <Box>
                   <Typography
-                    variant="h4"
+                    variant="h5"
                     color="primary"
                     sx={{ fontWeight: "bold" }}
                   >
@@ -1061,7 +1061,7 @@ class ProductDetailPage extends Component {
 
         {product.komponenten && product.komponenten.split(",").length > 0 && (
           <Box sx={{ mt: 4, p: 4, background: "#fff", borderRadius: 2, boxShadow: "0 2px 8px rgba(0,0,0,0.08)" }}>
-            <Typography variant="h4" gutterBottom>{this.props.t ? this.props.t('product.consistsOf') : 'Bestehend aus:'}</Typography>
+            <Typography variant="h2" component="h2" gutterBottom>{this.props.t ? this.props.t('product.consistsOf') : 'Bestehend aus:'}</Typography>
             <Box sx={{ maxWidth: 800, mx: "auto" }}>
             
                         {(console.log("komponentenLoaded:", komponentenLoaded), komponentenLoaded) ? (

src/components/configurator/ExtrasSelector.js

@@ -106,7 +106,7 @@ class ExtrasSelector extends Component {
 
       return (
         <Box sx={{ mb: 4 }}>
-          <Typography variant="h5" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+          <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
             {title}
           </Typography>
           {subtitle && (
@@ -136,7 +136,7 @@ class ExtrasSelector extends Component {
     // Render without category grouping
     return (
       <Box sx={{ mb: 4 }}>
-        <Typography variant="h5" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+        <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
           {title}
         </Typography>
         {subtitle && (

src/components/configurator/ProductSelector.js

@@ -147,9 +147,9 @@ class ProductSelector extends Component {
 
     return (
       <Box sx={{ mb: 4 }}>
-        <Typography variant="h5" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+              <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
-          {title}
+        {title}
-        </Typography>
+      </Typography>
         {subtitle && (
           <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
             {subtitle}

src/components/configurator/TentShapeSelector.js

@@ -90,7 +90,7 @@ class TentShapeSelector extends Component {
         onClick={() => onShapeSelect(shape.id)}
       >
         <CardContent sx={{ textAlign: 'center', p: 3 }}>
-          <Typography variant="h5" gutterBottom sx={{ fontWeight: 'bold' }}>
+          <Typography variant="h4" component="h4" gutterBottom sx={{ fontWeight: 'bold' }}>
             {shape.name}
           </Typography>
           
@@ -218,7 +218,7 @@ class TentShapeSelector extends Component {
 
     return (
       <Box sx={{ mb: 4 }}>
-        <Typography variant="h5" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+        <Typography variant="h2" component="h2" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
           {title}
         </Typography>
         {subtitle && (

src/pages/GrowTentKonfigurator.js

@@ -483,10 +483,10 @@ class GrowTentKonfigurator extends Component {
           )}
           
           <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
-            <Typography variant="h4" sx={{ fontWeight: 'bold' }}>
+            <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
               Gesamtpreis:
             </Typography>
-            <Typography variant="h4" sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+            <Typography variant="h5" sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
               {this.formatPrice(totalPrice)}
             </Typography>
           </Box>
@@ -517,7 +517,7 @@ class GrowTentKonfigurator extends Component {
       <Container maxWidth="lg" sx={{ py: 4 }}>
         <Paper elevation={2} sx={{ p: 4, borderRadius: 2 }}>
           <Box sx={{ textAlign: 'center', mb: 4 }}>
-            <Typography variant="h3" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
+            <Typography variant="h3" component="h1" gutterBottom sx={{ color: '#2e7d32', fontWeight: 'bold' }}>
               🌱 Growbox Konfigurator
             </Typography>
             <Typography variant="h6" color="text.secondary">