diff --git a/src/index.css b/src/index.css
index ed208e9..2c4d254 100644
--- a/src/index.css
+++ b/src/index.css
@@ -7,9 +7,9 @@
--accent-green: #2FA66A;
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--transition-fast: 0.2s ease;
- --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
- --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--header-height: 80px;
+ --bottom-nav-height: 0px;
+ --safe-area-bottom: env(safe-area-inset-bottom);
}
* {
@@ -17,10 +17,13 @@
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
+ touch-action: manipulation;
}
html {
scroll-behavior: smooth;
+ overflow-x: hidden;
+ width: 100%;
}
body {
@@ -31,22 +34,24 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
+ width: 100%;
+ text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
color: var(--primary-color);
font-weight: 700;
- line-height: 1.1;
+ line-height: 1.2;
margin-bottom: 1.5rem;
- letter-spacing: -0.03em;
+ letter-spacing: -0.02em;
}
-h1 { font-size: clamp(2rem, 5vw, 3.5rem); hyphens: auto; }
+h1 { font-size: clamp(2rem, 8vw, 3.5rem); hyphens: auto; }
h1.no-underline::after,
h2.no-underline::after {
display: none !important;
}
-h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); position: relative; display: block; margin-bottom: 2rem; }
+h2 { font-size: clamp(1.5rem, 6vw, 2.5rem); position: relative; display: block; margin-bottom: 2rem; }
h2:not(.no-underline)::after {
content: '';
position: absolute;
@@ -112,7 +117,7 @@ input, textarea {
margin-bottom: 1.5rem;
transition: all var(--transition-fast);
border-radius: 4px;
- font-size: 16px; /* Prevent zoom on iOS */
+ font-size: 16px;
}
input:focus, textarea:focus {
@@ -146,6 +151,7 @@ input:focus, textarea:focus {
margin-bottom: 2rem;
border: 1px solid var(--secondary-bg);
border-radius: 8px;
+ content-visibility: auto;
}
.nav-link {
@@ -171,17 +177,67 @@ input:focus, textarea:focus {
margin-bottom: 0.75rem;
}
+header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ background: rgba(248, 249, 250, 0.95);
+ backdrop-filter: blur(10px);
+ border-bottom: 1px solid var(--secondary-bg);
+}
+
header .container {
height: var(--header-height);
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.mobile-nav {
+ display: none;
+}
+
+.scroll-top-btn {
+ position: fixed;
+ bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 20px);
+ right: 20px;
+ width: 50px;
+ height: 50px;
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ z-index: 900;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ transition: all 0.3s ease;
+}
+
+.scroll-top-btn:hover {
+ transform: translateY(-5px);
+ background: var(--accent-green);
+}
+
+@media (max-width: 768px) {
+ .scroll-top-btn {
+ bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom) + 15px);
+ right: 15px;
+ width: 44px;
+ height: 44px;
+ }
}
@media (max-width: 768px) {
:root {
- --header-height: 64px;
+ --header-height: 60px;
+ --bottom-nav-height: 70px;
}
section {
- padding: 4rem 0;
+ padding: 3rem 0;
}
.grid {
@@ -189,70 +245,357 @@ header .container {
}
header .container {
- height: var(--header-height);
padding: 0 1rem;
+ justify-content: center;
+ }
+
+ header nav {
+ display: none !important;
}
header img {
height: 40px !important;
}
- nav {
+ .mobile-nav {
+ display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
- background: white;
- border-top: 1px solid var(--secondary-bg);
- padding: 0.75rem 1rem;
- justify-content: space-around !important;
- gap: 0 !important;
- box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
+ height: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
+ background: rgba(255, 255, 255, 0.94);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border-top: 1px solid rgba(0,0,0,0.05);
+ justify-content: space-around;
+ align-items: center;
z-index: 1000;
+ padding-bottom: var(--safe-area-bottom);
+ box-shadow: 0 -4px 12px rgba(0,0,0,0.03);
}
- .nav-link {
- font-size: 0.7rem;
+ .mobile-nav-link {
display: flex;
flex-direction: column;
align-items: center;
- gap: 4px;
+ justify-content: center;
+ gap: 6px;
+ color: #9ca3af;
+ font-size: 0.6rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.08em;
+ flex: 1;
+ height: 100%;
+ min-width: 44px;
+ min-height: 44px;
+ transition: color 0.2s ease;
}
- .nav-link::after {
- display: none;
+ .mobile-nav-link.active {
+ color: var(--primary-color);
+ }
+
+ .mobile-nav-link.active svg {
+ color: var(--accent-green);
}
main {
- padding-bottom: 80px; /* Space for bottom nav */
- }
-
- .hero {
- padding: 2rem 0 !important;
- min-height: auto !important;
- }
-
- .hero .grid {
- grid-template-columns: 1fr !important;
- }
-
- .hero div:first-child {
- width: 100% !important;
- clip-path: none !important;
- background: #f1f5f9 !important;
- padding: 2rem 1rem !important;
- border-radius: 12px;
- }
-
- .hero .img-placeholder {
- display: none;
+ padding-bottom: var(--bottom-nav-height);
}
.cta-button {
width: 100%;
+ padding: 1.1rem;
+ font-size: 0.9rem;
+ border-radius: 12px;
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+ }
+
+ .cta-button:active {
+ transform: scale(0.98);
+ }
+
+ .hero {
+ padding: 2rem 0 !important;
+ }
+
+ .hero-bg {
+ display: none;
+ }
+
+ .hero-grid {
+ grid-template-columns: 1fr !important;
+ gap: 2rem !important;
+ }
+
+ .hero-content {
+ background: #f1f5f9;
+ padding: 2rem 1.5rem;
+ border-radius: 12px;
+ text-align: center;
+ }
+
+ .hero-content h1 {
+ font-size: clamp(2rem, 10vw, 2.8rem);
+ line-height: 1.1;
+ margin-bottom: 1rem;
+ }
+
+ .hero-content p {
+ font-size: 1.15rem !important;
+ line-height: 1.5;
+ margin-bottom: 2rem;
+ color: #4b5563;
+ }
+
+ .hero-actions {
+ justify-content: center;
+ flex-direction: column;
+ width: 100%;
+ }
+
+ .hero-actions .secondary-link {
+ padding: 1rem;
+ width: 100%;
+ justify-content: center;
+ }
+
+ .hero-img {
+ display: none;
+ }
+
+ .section-header {
+ text-align: center;
+ margin-bottom: 4rem !important;
+ padding: 0 1rem;
+ }
+
+ .section-header h2 {
+ margin-bottom: 1.5rem;
+ }
+
+ .section-header p {
+ font-size: 1.1rem;
+ line-height: 1.6;
+ margin: 0 auto;
+ }
+
+ .section-header h2::after {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .portfolio-grid {
+ grid-template-columns: 1fr !important;
+ }
+
+ .portfolio-card {
+ padding: 2rem 1.5rem;
+ text-align: center;
+ }
+
+ .split-grid {
+ grid-template-columns: 1fr !important;
+ gap: 2rem !important;
+ }
+
+ .split-img {
+ height: 250px !important;
+ }
+
+ .split-content {
+ text-align: center;
+ padding: 0 1rem;
+ }
+
+ .split-content h2 {
+ font-size: 1.8rem;
+ }
+
+ .split-content p {
+ font-size: 1.1rem;
+ margin-bottom: 2rem;
+ }
+
+ .target-grid {
+ grid-template-columns: 1fr !important;
+ text-align: left;
+ max-width: 300px;
+ margin: 0 auto;
+ gap: 1rem !important;
+ }
+
+ .target-item {
+ padding: 1rem;
+ background: white;
+ border: 1px solid rgba(0,0,0,0.05);
+ border-radius: 12px;
+ width: 100%;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+ }
+
+ .spec-grid {
+ grid-template-columns: 1fr !important;
+ }
+
+ .spec-card {
+ padding: 2.5rem 1.5rem !important;
+ text-align: center;
+ border-radius: 20px;
+ background: rgba(255,255,255,0.03) !important;
+ border: 1px solid rgba(255,255,255,0.08) !important;
+ }
+
+ .principles-grid {
+ grid-template-columns: 1fr !important;
+ }
+
+ .principle-item {
+ text-align: center;
+ border-left: none !important;
+ border-top: 4px solid var(--accent-green);
+ padding: 2.5rem 1.5rem 1.5rem 1.5rem !important;
+ background: white;
+ border-radius: 0 0 20px 20px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.03);
+ }
+
+ .cta-section {
+ padding: 4rem 0 !important;
+ }
+
+ .cta-section h2 {
+ font-size: clamp(1.5rem, 8vw, 2rem) !important;
+ }
+
+ .cta-section p {
+ font-size: 1.1rem !important;
+ }
+
+ footer {
+ text-align: center;
+ padding-bottom: 2rem !important;
+ }
+
+ footer .grid {
+ grid-template-columns: 1fr !important;
+ gap: 3rem !important;
+ }
+
+ footer .grid div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ footer .container > div:last-child {
+ flex-direction: column;
+ gap: 1rem;
+ text-align: center;
}
.card {
+ padding: 2rem 1.5rem;
+ border-radius: 16px;
+ border: 1px solid rgba(0,0,0,0.05);
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+ }
+
+ .portfolio-card {
+ padding: 2.5rem 1.5rem;
+ text-align: center;
+ }
+
+ .about-hero-grid {
+ grid-template-columns: 1fr !important;
+ gap: 3rem !important;
+ text-align: center;
+ }
+
+ .about-hero-grid h1 {
+ font-size: 2.5rem;
+ }
+
+ .about-hero-grid p {
+ font-size: 1.1rem;
+ }
+
+ .about-hero-img {
+ height: 300px !important;
+ }
+
+ .team-grid {
+ grid-template-columns: 1fr !important;
+ }
+
+ .team-card-header {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 1rem !important;
+ }
+
+ .manifest-grid {
+ grid-template-columns: 1fr !important;
+ gap: 2rem !important;
+ }
+
+ .manifest-item {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ padding: 2rem 1.5rem;
+ background: white;
+ border-radius: 20px;
+ border: 1px solid rgba(0,0,0,0.03);
+ }
+
+ .contact-grid {
+ grid-template-columns: 1fr !important;
+ gap: 3rem !important;
+ }
+
+ .contact-form-grid {
+ grid-template-columns: 1fr !important;
+ }
+
+ .contact-info-item {
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ background: white;
+ padding: 2rem 1.5rem;
+ border-radius: 20px;
+ border: 1px solid rgba(0,0,0,0.05);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.02);
+ }
+
+ .badge {
+ font-size: 0.7rem;
+ letter-spacing: 0.1em;
+ }
+
+ h3 {
+ font-size: 1.25rem;
+ }
+
+ .legal-content {
padding: 1.5rem;
+ background: white;
+ border-radius: 20px;
+ border: 1px solid rgba(0,0,0,0.05);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.02);
+ }
+
+ .legal-content h2 {
+ font-size: 1.4rem;
+ margin-top: 2rem;
+ }
+
+ .legal-content p {
+ font-size: 1rem;
+ line-height: 1.7;
}
}
diff --git a/src/pages/AGB.tsx b/src/pages/AGB.tsx
index 0864ee0..d2596ac 100644
--- a/src/pages/AGB.tsx
+++ b/src/pages/AGB.tsx
@@ -1,8 +1,8 @@
const AGB = () => (
- Allgemeine Geschäftsbedingungen (AGB)
-
+
Allgemeine Geschäftsbedingungen
+
Hier finden Sie unsere Allgemeinen Geschäftsbedingungen...
[Platzhalter für AGB-Inhalte]
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 490317d..6a3e273 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -5,7 +5,7 @@ const About = () => (
-
+
Über uns
@@ -18,7 +18,7 @@ const About = () => (
Unsere Wurzeln liegen in der tiefen praktischen Erfahrung. Wir vereinen Tradition mit modernster Innovation, um zuverlässige Energielösungen für Projekte bis 110 kV und darüber hinaus zu realisieren.
-
+
[ Engineering Excellence Visualization ]
@@ -31,9 +31,9 @@ const About = () => (
Die Köpfe hinter MB Grid Solution
Expertise, die Energie zum Laufen bringt.
-
+
-
+
Michael Bodemer
@@ -49,7 +49,7 @@ const About = () => (
-
+
Klaus Mintel
@@ -73,43 +73,43 @@ const About = () => (
Unser Manifest
Werte, die unsere tägliche Arbeit leiten.
-
-
+
+
1. Kompetenz
Jahrzehntelange Erfahrung kombiniert mit europaweitem Know-how. Wir arbeiten mit Partnern für modernste Anlagen und Testlabore bis 525 kV.
-
+
2. Verfügbarkeit
Schnelle und verlässliche Unterstützung ohne unnötige Verzögerungen. Wir sind für Sie da, wenn es darauf ankommt.
-
+
3. Lösungen
Wir stellen die richtigen Fragen – an Sie, an Hersteller und an uns selbst. Nur wer hinterfragt, findet die technisch und wirtschaftlich beste Lösung.
-
+
4. Logistik & Überwachung
Von der Fertigungsüberwachung bis zum Fracht-Tracking und der termingerechten Anlieferung – wir steuern den gesamten Prozess professionell.
-
+
5. Offenheit
Wir hören zu und passen unsere Prozesse kontinuierlich an. Stillstand ist für uns keine Option – wir optimieren für Ihren Erfolg.
-
+
6. Zuverlässigkeit
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
index 88812e8..e73fe05 100644
--- a/src/pages/Contact.tsx
+++ b/src/pages/Contact.tsx
@@ -35,7 +35,7 @@ const Contact = () => {
return (
-
+
{
-
+
-
+
-
+
Anschrift
@@ -89,7 +89,7 @@ const Contact = () => {
) : (