diff --git a/assets/scss/_typography.scss b/assets/scss/_typography.scss index 8f6fda8..bf027cc 100644 --- a/assets/scss/_typography.scss +++ b/assets/scss/_typography.scss @@ -14,38 +14,36 @@ font-style: normal; } - - - // Using Variables for Font Families $font-primary: 'Open Sans', sans-serif; $font-secondary: 'Open Sans Semibold', sans-serif; - - +$color-heading-h2: #046e6e; // Türkis für h2 body { line-height: 1.5; font-family: $font-primary; -webkit-font-smoothing: antialiased; - } h1, -h2, h3, h4, h5, h6 { font-family: $font-secondary; + font-weight: 400; + // keine Farbe, Standardfarbe übernehmen } -h1, -h2, -h3, -h4, -h5, -h6 { +h2 { + font-family: $font-secondary; font-weight: 400; + color: $color-heading-h2; // Nur h2 in Türkis + font-size: $h2; + + @include mobile { + font-size: $h2-sm; + } } h1 { @@ -64,14 +62,6 @@ h1 { } } -h2 { - font-size: $h2; - - @include mobile { - font-size: $h2-sm; - } -} - h3 { font-size: $h3; } @@ -81,7 +71,7 @@ h4 { } p { - color: darken( $light, 49.41); + color: black; font-size: $font-size; font-family: $font-secondary; } diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 2338712..cf0b9a0 100644 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -1,322 +1,257 @@ -// Add your custom code - .title-custom { - color: #046e6e; + color: #046e6e; } .text-center { - text-align: center; - } - - .text-justify { - text-align: justify; - } + text-align: center; +} +.text-justify { + text-align: justify; +} - - -/* Reduziert den Abstand zwischen den Sections */ section { - margin-bottom: 0px; /* Anpassung nach Bedarf */ - } - - /* Zusätzliche optionale Stile für eine bessere Darstellung */ - #welcome.section, #service.section { - padding-top: 90px; /* Anpassung nach Bedarf */ - padding-bottom: 4px; /* Anpassung nach Bedarf */ + margin-bottom: 0px; +} + +#welcome.section, #service.section { + padding-top: 90px; + padding-bottom: 4px; +} + +.description { + font-size: 22px; + line-height: 1.5; + padding-top: 90px; + padding-bottom: 1px; + + @media (max-width: 768px) { + font-size: 18px; + padding-top: 70px; } - .text-justify { - text-align: justify; + @media (max-width: 480px) { + font-size: 16px; + padding-top: 50px; } - - .description { - font-size: 22px; /* Standard Schriftgröße */ - line-height: 1.5; - padding-top: 90px; /* Anpassung nach Bedarf */ - padding-bottom: 1px; /* Anpassung nach Bedarf */ - - @media (max-width: 768px) { - font-size: 18px; /* Kleinere Schriftgröße für Tablets */ - padding-top: 70px; /* Anpassung nach Bedarf */ - padding-bottom: 1px; /* Anpassung nach Bedarf */ - } - - @media (max-width: 480px) { - font-size: 16px; /* Noch kleinere Schriftgröße für Handys */ - padding-top: 50px; /* Anpassung nach Bedarf */ - padding-bottom: 1px; /* Anpassung nach Bedarf */ - } - } - +} - .facts .fact-item { - padding: 15px; /* Abstand um die Bilder */ - } +.facts .fact-item { + padding: 15px; +} - +.fact-image { + height: 250px; + width: auto; + object-fit: contain; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} - .facts .fact-item { - padding: 15px; /* Abstand um die Bilder */ - } - - .fact-image { - height: 250px; /* Einheitliche Höhe für alle Bilder */ - width: auto; /* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */ - object-fit: contain; /* Bild innerhalb der festgelegten Höhe zuschneiden, um das Seitenverhältnis beizubehalten */ - border-radius: 8px; /* Abgerundete Ecken für die Bilder */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */ - } - - .custom-background { - background-size: cover; - background-position: center center; - background-repeat: no-repeat; - } +.custom-background { + background-size: cover; + background-position: center; + background-repeat: no-repeat; +} +.service-arrow .block { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px; + border-radius: 100px; + color: #8a0909; +} - - - .service-arrow .block { - display: flex; - align-items: center; - justify-content: space-between; - } - - .service-content { - flex: 1; - } - - .service-icon { - margin-right: 15px; /* Abstand nach Bedarf anpassen */ - } - - .service-image { - margin-left: 15px; /* Abstand nach Bedarf anpassen */ - } - - .service-image img { - max-width: 150px; /* Maximale Breite des Bildes anpassen */ - height: auto; - } +.service-content { + flex: 1; +} +.service-icon, .service-image { + margin: 0; +} - .bg-service1 { - background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */ - } - .bg-service2 { - background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */ - } - .bg-service3 { - background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */ - } - .bg-service4 { - background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */ - } - .bg-service5 { - background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */ - } - .bg-service6 { - background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */ - } - .bg-service7 { - background-color: #8bcfd6; /* Beispielhafte Farbe für primary-dark */ - } - .bg-service8 { - background-color: #6baeb5; /* Beispielhafte Farbe für primary-dark */ - } +.service-image img { + max-width: 600px; + height: auto; + display: block; +} - .fixed-width { - width: 1200px; /* Feste Breite, die du anpassen kannst */ - height: auto; /* Höhe wird automatisch angepasst, um das Seitenverhältnis beizubehalten */ - } - - .service-arrow .block { - display: flex; - align-items: center; - justify-content: space-between; - padding: 20px; /* Optional: Padding hinzufügen */ - border-radius: 100px; /* Optional: Abgerundete Ecken hinzufügen */ - color: #8a0909; /* Optional: Textfarbe auf Weiß setzen */ - } - - .service-icon { - margin-right: 0px; /* Abstand nach Bedarf anpassen */ - } - - .service-content { - flex: 1; - } - - .service-image { - margin-left: 0px; /* Abstand nach Bedarf anpassen */ - } - +.bg-service1, .bg-service3, .bg-service5, .bg-service7 { + background-color: #8bcfd6; +} - +.bg-service2, .bg-service4, .bg-service6, .bg-service8 { + background-color: #6baeb5; +} +.fixed-width { + width: 1200px; +} +.fixed-text { + width: 600px; + margin-right: 15px; +} - - .fixed-text { - width: 600px; /* Feste Breite für den Text */ - margin-right: 15px; /* Optional: Abstand nach Bedarf anpassen */ - } +.page-title::before { + content: ''; + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + background-color: #ffffff; + z-index: -1; +} - .service-image img { - max-width: 600px; /* Maximale Breite des Bildes anpassen */ - height: auto; - margin: 0; /* Entfernt zusätzliche Margins */ - padding: 0; /* Entfernt zusätzliches Padding */ - border: none; /* Entfernt jegliche Standardrahmen */ - display: block; /* Verhindert zusätzliche Ränder bei inline-block-Elementen */ - } +.service-grid { + display: grid; + gap: 30px; + grid-template-columns: repeat(3, 1fr); - .page-title::before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: #ffffff; /* Weiß als Hintergrundfarbe */ - z-index: -1; /* Sicherstellen, dass es hinter dem Inhalt liegt */ - } - - - - - - - - - - - - - - .service-grid { - display: grid; - gap: 30px; /* 40px Abstand sowohl horizontal als auch vertikal */ - grid-template-columns: repeat(3, 1fr); - /* => Standard: 3 Spalten für größere Bildschirme */ - } - @media (max-width: 992px) { - .service-grid { - grid-template-columns: repeat(2, 1fr); - /* => mittlere Screens: nur 2 Spalten */ - } - } - - @media (max-width: 576px) { - .service-grid { - grid-template-columns: 1fr; - /* => kleine Screens: 1 Spalte */ - } - } - - /* Ab hier das Zoom-/Overlay-Setup (identisch wie vorher) */ - .service-item-fixed { - width: 100%; - height: auto; /* Oder "auto" falls die Höhe flexibel sein soll */ - position: relative; - overflow: hidden; - border-radius: 10px; /* Abgerundete Ecken */ - } - - .zoom-wrap { - width: 100%; - height: 100%; - position: relative; - transition: transform 0.3s ease; - } - - .service-item-fixed:hover .zoom-wrap { - transform: scale(1.06); - } - - .zoom-wrap a { - display: block; /* Stellt sicher, dass der Link das gesamte umschlossene Element abdeckt */ - text-decoration: none; /* Entfernt die Unterstreichung des Links */ - color: inherit; /* Erbt die Textfarbe, um sicherzustellen, dass der Linktext stilistisch passt */ + grid-template-columns: repeat(2, 1fr); } - .zoom-wrap img { - width: 100%; - height: 100%; - object-fit: cover; - display: block; + @media (max-width: 576px) { + grid-template-columns: 1fr; } - -/* Das "dunkle Overlay" */ +} + +.service-item-fixed { + width: 100%; + border-radius: 10px; + overflow: hidden; + position: relative; +} + +.zoom-wrap { + transition: transform 0.3s ease; + width: 100%; + height: 100%; + position: relative; +} + +.service-item-fixed:hover .zoom-wrap { + transform: scale(1.06); +} + +.zoom-wrap img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.zoom-wrap a { + display: block; + text-decoration: none; + color: inherit; +} + .zoom-wrap .overlay { position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: rgba(0, 0, 0, 0.4); /* dunkler Schleier (30% schwarz) */ - z-index: 1; /* Overlay unter dem Text, aber über dem Bild */ - pointer-events: auto; /* Stellt sicher, dass das Overlay klickbar ist */ + top: 0; right: 0; bottom: 0; left: 0; + background: rgba(0, 0, 0, 0.4); + z-index: 1; } - .overlay-text { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: #fff; - font-size: 2.3em; - font-weight: bold; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); - z-index: 2; /* Höher als das Overlay */ - } - +.overlay-text { + position: absolute; + top: 50%; left: 50%; + transform: translate(-50%, -50%); + color: #fff; + font-size: 2.3em; + font-weight: bold; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); + z-index: 2; +} - .my-container { - width: 80%; - margin: 0 auto; - } +.my-container { + width: 80%; + margin: 0 auto; +} - .gif-background { - background-image: url('/images/BackgroundAnimation.svg'); /* Pfad zu Ihrem GIF */ - background-size: cover; /* Deckt den gesamten Hintergrund ab */ - background-position: center -220px; /* Positioniert das GIF oben in der Mitte */ - background-repeat: no-repeat; /* Verhindert die Wiederholung des GIFs */ - position: relative; /* Stellt sicher, dass das Overlay korrekt positioniert wird */ - } - - .gif-background::after { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(255, 255, 255, 0.8); /* Weißer Overlay mit 70% Deckkraft */ - pointer-events: none; /* Stellt sicher, dass das Overlay keine Interaktionen blockiert */ - } - - .custom-image { +.gif-background { + background-image: url('/images/BackgroundAnimation.svg'); + background-size: cover; + background-position: center -220px; + background-repeat: no-repeat; + position: relative; +} + +.gif-background::after { + content: ''; + position: absolute; + top: 0; left: 0; right: 0; bottom: 0; + background-color: rgba(255, 255, 255, 0.8); +} + +.custom-image { width: 100px; - height: auto; max-width: 70%; + height: auto; } - - - .custom-title { - color: #046e6e; /* Ersetze dies mit der Farbe deiner Wahl */ + color: #046e6e; } - - .hover-link { transition: color 0.3s ease; } .hover-link:hover { color: #F5A623; -} \ No newline at end of file +} + +/* Mehrwert */ +.mehrwerte-grid { + display: grid; + gap: 0; + grid-template-columns: repeat(1, 1fr); + + @media (min-width: 768px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 1200px) { + grid-template-columns: repeat(4, 1fr); + } +} + + +.mehrwerte-box { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + padding: 30px; + border-radius: 8px; + transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; + + &:hover { + background-color: lighten(#004d4d, 10%); + transform: translateY(-4px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); + } + h4, + p { + color: #000 !important; + transition: color 0.3s ease; + } + &:hover h4, + &:hover p { + color: #000 !important; + } +} +.mehrwert-icon { + filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); +} + +/* Gründerteam Styling */ +.container-fluid { + max-width: 100%; + padding-left: 5vw; + padding-right: 5vw; +} + diff --git a/config/_default/menus.de.toml b/config/_default/menus.de.toml index 5ab2a6f..0890fd2 100644 --- a/config/_default/menus.de.toml +++ b/config/_default/menus.de.toml @@ -1,33 +1,30 @@ ############# German navigation ############## -# main menu - +# Hauptmenü [[main]] name = "Leistungen" -url = "service/" +url = "leistungen/" weight = 1 -identifier = "service" +identifier = "leistungen" -[[main]] -name = "Planung" -url = "service/planung/" -weight = 1 -parent = "service" - -[[main]] -name = "Projektmanagement" -url = "service/projektmanagement/" -weight = 2 -parent = "service" - -[[main]] -name = "Consulting" -url = "service/consulting/" -weight = 3 -parent = "service" + [[main]] + name = "Planung" + url = "leistungen/planung/" + weight = 1 + parent = "leistungen" + [[main]] + name = "Projektmanagement" + url = "leistungen/projektmanagement/" + weight = 2 + parent = "leistungen" + [[main]] + name = "Consulting" + url = "leistungen/consulting/" + weight = 3 + parent = "leistungen" [[main]] name = "Fokusthemen" @@ -35,25 +32,23 @@ url = "fokusthemen/" weight = 2 identifier = "fokusthemen" -[[main]] -name = "Photovoltaik" -url = "service/photovoltaik/" -weight = 1 -parent = "fokusthemen" - -[[main]] -name = "Energiespeicher" -url = "service/energierspeicher/" -weight = 2 -parent = "fokusthemen" - -[[main]] -name = "E-Mobilität" -url = "service/emobilität/" -weight = 3 -parent = "fokusthemen" + [[main]] + name = "Photovoltaik" + url = "fokusthemen/photovoltaik/" + weight = 1 + parent = "fokusthemen" + [[main]] + name = "Energiespeicher" + url = "fokusthemen/energiespeicher/" + weight = 2 + parent = "fokusthemen" + [[main]] + name = "E-Mobilität" + url = "fokusthemen/emobilitaet/" + weight = 3 + parent = "fokusthemen" [[main]] name = "Über AMPERION" @@ -67,15 +62,16 @@ weight = 4 [[main]] name = "Karriere" -url = "contact/" +url = "karriere/" weight = 5 -# footer menu +# Footer-Menü + [[footer]] name = "Leistungen" -url = "service/" +url = "leistungen/" weight = 1 [[footer]] @@ -101,4 +97,4 @@ weight = 5 [[footer]] name = "Datenschutz" url = "datenschutz/" -weight = 6 \ No newline at end of file +weight = 6 diff --git a/config/_default/menus.en.toml b/config/_default/menus.en.toml index f79969f..0ac22f5 100644 --- a/config/_default/menus.en.toml +++ b/config/_default/menus.en.toml @@ -1,59 +1,54 @@ ############# English navigation ############## -# main menu - +# Main menu [[main]] name = "Services" -url = "service/" +url = "leistungen/" weight = 1 -identifier = "service" +identifier = "services" -[[main]] -name = "Planning" -url = "service/planung/" -weight = 1 -parent = "service" - -[[main]] -name = "Project Management" -url = "service/projektmanagement/" -weight = 2 -parent = "service" - -[[main]] -name = "Consulting" -url = "service/consulting/" -weight = 3 -parent = "service" + [[main]] + name = "Planning" + url = "leistungen/planung/" + weight = 1 + parent = "services" + [[main]] + name = "Project Management" + url = "leistungen/projektmanagement/" + weight = 2 + parent = "services" + [[main]] + name = "Consulting" + url = "leistungen/consulting/" + weight = 3 + parent = "services" [[main]] name = "Focus Topics" url = "fokusthemen/" weight = 2 -identifier = "fokusthemen" +identifier = "focustopics" -[[main]] -name = "Photovoltaic" -url = "service/photovoltaik/" -weight = 1 -parent = "fokusthemen" - -[[main]] -name = "Energy storage" -url = "service/energierspeicher/" -weight = 2 -parent = "fokusthemen" - -[[main]] -name = "E-mobility" -url = "service/emobilität/" -weight = 3 -parent = "fokusthemen" + [[main]] + name = "Photovoltaics" + url = "fokusthemen/photovoltaik/" + weight = 1 + parent = "focustopics" + [[main]] + name = "Energy Storage" + url = "fokusthemen/energiespeicher/" + weight = 2 + parent = "focustopics" + [[main]] + name = "E-Mobility" + url = "fokusthemen/emobilitaet/" + weight = 3 + parent = "focustopics" [[main]] name = "About AMPERION" @@ -67,15 +62,15 @@ weight = 4 [[main]] name = "Career" -url = "contact/" +url = "karriere/" weight = 5 +# Footer menu -# footer menu [[footer]] name = "Services" -url = "service/" +url = "leistungen/" weight = 1 [[footer]] @@ -89,7 +84,7 @@ url = "about/" weight = 3 [[footer]] -name = "Impressum" +name = "Imprint" url = "impressum/" weight = 4 @@ -99,6 +94,6 @@ url = "agb/" weight = 5 [[footer]] -name = "Data protection" +name = "Data Protection" url = "datenschutz/" -weight = 6 \ No newline at end of file +weight = 6 diff --git a/content/german/Fokusthemen/emobilitaet.md b/content/german/Fokusthemen/emobilitaet.md new file mode 100644 index 0000000..c522be6 --- /dev/null +++ b/content/german/Fokusthemen/emobilitaet.md @@ -0,0 +1,21 @@ +--- +title: "E-Mobilität" +description: "Kompetente Begleitung bei Ladeinfrastruktur, Standortplanung und technischen Umsetzungen für E-Mobilität." +date: 2025-07-29 +layout: leistung +draft: false +--- + +## Ladeinfrastruktur effizient planen + +E-Mobilität ist mehr als nur Ladestationen. Wir helfen Ihnen, technische, wirtschaftliche und regulatorische Anforderungen in Einklang zu bringen – für zukunftssichere Mobilitätslösungen. + +**Unsere Leistungen:** + +- Standortanalyse & Netzanschlussplanung +- Auswahl geeigneter Ladesysteme & Hersteller +- Unterstützung bei MS-/NS-Zuleitungen +- Integration in bestehende Energiekonzepte +- Begleitung bei Behördenverfahren & Förderungen + +**Warum AMPERION?** Weil wir Elektrotechnik und Mobilität ganzheitlich denken. diff --git a/content/german/Fokusthemen/energiespeicher.md b/content/german/Fokusthemen/energiespeicher.md new file mode 100644 index 0000000..ac07e97 --- /dev/null +++ b/content/german/Fokusthemen/energiespeicher.md @@ -0,0 +1,21 @@ +--- +title: "Energiespeicher" +description: "Individuelle Konzepte für Stromspeicherlösungen – für mehr Autarkie und Netzunabhängigkeit." +date: 2025-07-29 +layout: leistung +draft: false +--- + +## Energie speichern, wenn sie verfügbar ist + +Energiespeicher ermöglichen maximale Eigenverbrauchsquote und höhere Netzunabhängigkeit. Ob Lithium-Ionen-Speicher oder Redox-Flow-Technologien – wir beraten Sie technologieoffen und unabhängig. + +**Unsere Leistungen:** + +- Systemauslegung & Integration in bestehende Anlagen +- Wirtschaftlichkeitsrechnungen & ROI-Analysen +- Dimensionierung & Regelstrategien +- Unterstützung bei Förderungen & Ausschreibungen +- Konzepte für Notstrom- & Inselbetrieb + +**Ziel:** Volle Kontrolle über Ihren Energiehaushalt – heute und in Zukunft. diff --git a/content/german/Fokusthemen/photovoltaik.md b/content/german/Fokusthemen/photovoltaik.md new file mode 100644 index 0000000..0b4e21a --- /dev/null +++ b/content/german/Fokusthemen/photovoltaik.md @@ -0,0 +1,21 @@ +--- +title: "Photovoltaik" +description: "Planung, Beratung und Umsetzung nachhaltiger Photovoltaik-Lösungen für Unternehmen und Privatkunden." +date: 2025-07-29 +layout: leistung +draft: false +--- + +## Effizient zur Sonnenenergie + +Die Nutzung von Solarenergie ist ein zentraler Bestandteil der Energiewende. Wir unterstützen Sie bei der Planung, Dimensionierung und Umsetzung Ihrer Photovoltaikanlage – von der Dachanalyse über die Netzanfrage bis hin zur fertigen Anlage. + +**Unsere Leistungen:** + +- Technische & wirtschaftliche Machbarkeitsanalysen +- Ertrags- & Verschattungsberechnungen +- Unterstützung bei Netzanschluss & Förderungen +- Begleitung bei Ausschreibungen & Vergabe +- Lastprofiloptimierung & Energiemonitoring + +**Ihr Vorteil:** Maßgeschneiderte Lösungen, die langfristig Energie und Kosten sparen. diff --git a/content/german/Leistungen/consulting.md b/content/german/Leistungen/consulting.md new file mode 100644 index 0000000..19d2749 --- /dev/null +++ b/content/german/Leistungen/consulting.md @@ -0,0 +1,67 @@ +--- +title: "Consulting & Energieberatung" +description: "Beratung zu Energiekonzepten, Marktbeobachtung, Begutachtung von Bestandsanlagen, Förderberatung und Energiemanagement – unabhängige Beratung von AMPERION." +slug: "consulting" +layout: "leistung" +date: 2025-07-29 +draft: false +tags: ["Consulting", "Energieberatung", "Energiekonzept", "Förderberatung", "Energiemanagement", "Bestandsanlagen", "Marktbeobachtung"] +categories: ["Leistungen"] +--- + +# Unabhängige Beratung, die Entscheidungen erleichtert. + +Wir beraten **herstellerneutral** zu Technik, Wirtschaftlichkeit und Umsetzung – von der **Bestandsanalyse** bis zur **Förderstrategie**. Ziel: **bessere Entscheidungen**, geringere Risiken, schnellere Umsetzung. + +--- + +## Unsere Consulting‑Leistungen + +### Beratung zu Energiekonzepten +- Strategie für **PV, Speicher, EMS, Ladeinfrastruktur, WP** +- Eigenverbrauch, Peak‑Shaving, Tarif‑/Marktmodell‑Bewertung +- Roadmap & Priorisierung (Quick‑Wins vs. Invest) + +### Marktbeobachtung +- Technologietrends, Komponentenverfügbarkeit, Preisniveaus +- Auswirkungen regulatorischer Änderungen und Netzentgelte +- Chancen‑/Risikobewertung für Invests + +### Begutachtung von Bestandsanlagen +- Technische Due Diligence (Zustand, Norm, Betriebssicherheit) +- Performance‑Analyse, OPEX‑Optimierung, Retrofit‑Empfehlungen +- Mess‑/Schutz‑/Dokumentationscheck + +### Förderberatung +- Förderfähigkeit & Kombinierbarkeit (investiv/operativ) +- Erforderliche Nachweise & Zeitplan +- Begleitung von Antrag bis Verwendungsnachweis + +### Energiemanagement +- Zielsysteme (ISO 50001 optional), KPI‑Definition +- Monitoring‑Konzept (Messstellen, Daten, Dashboards) +- Last‑/Energieberichte, Maßnahmenkatalog mit Amortisation + +--- + +## Ergebnis & Mehrwert +- **Entscheidungsvorlagen** mit technischer & wirtschaftlicher Bewertung +- **Roadmaps** inkl. Milestones und Verantwortlichkeiten +- **Risiko‑ und Maßnahmenkatalog** für Planung & Betrieb + +--- + +## FAQ – Consulting +**Ist die Beratung herstellerneutral?** +Ja. Wir empfehlen ausschließlich **bedarfsgerechte** Lösungen. + +**Gibt es auch Workshops?** +Ja – Strategie‑, Technologie‑ oder Förder‑Workshops (½–1 Tag). + +**Unterstützen Sie bei Förderanträgen?** +Ja – von der Prüfung bis zur Einreichung und Dokumentation. + +--- + +> **Nächster Schritt:** +> Kurztermin buchen: **+43 677 620 90426** oder über [Kontakt](/kontakt/). diff --git a/content/german/Leistungen/planung.md b/content/german/Leistungen/planung.md new file mode 100644 index 0000000..a423789 --- /dev/null +++ b/content/german/Leistungen/planung.md @@ -0,0 +1,89 @@ +--- +title: "Planung Elektrotechnik & Energie" +description: "Einreichplanung, Entwurfs- und Ausführungsplanung, Energieausweis, Energiekonzepte und Studien – AMPERION ist staatlich geprüftes Ingenieurbüro & konzessionierter Elektrotechnikbetrieb aus Niederösterreich." +slug: "planung" +layout: "leistung" +date: 2025-07-29 +draft: false +tags: ["Elektrotechnik Planung", "Einreichplanung", "Ausführungsplanung", "Energieausweis", "Energiekonzept", "Studie", "Photovoltaik", "Ladeinfrastruktur"] +categories: ["Leistungen"] +--- + +# Planung mit Verantwortung. Technik mit Weitblick. + +Als **staatlich geprüftes Ingenieurbüro** und **konzessionierter Elektrotechnikbetrieb** planen wir elektrische Anlagen **normkonform, wirtschaftlich und zukunftssicher** – vom Konzept bis zur genehmigungsfähigen Ausführungsplanung. Unser Fokus: **Photovoltaik, Energiespeicher, Ladeinfrastruktur, Gebäudetechnik** und **Netzintegration** (inkl. Mittelspannungsanschlüsse). + +--- + +## Unsere Planungsleistungen + +### Einreichplanung +- Genehmigungsfähige Pläne und Unterlagen (Behörden, Netzbetreiber) +- Dimensionierung, Schutzkonzepte, Leitungs- und Kabeltrassen +- Netzanschlussanfrage (NS/MS), Lastfluss- & Kurzschlussbetrachtungen +- Brandschutz- und Fluchtwegbezug, Überspannungs- & Blitzschutzkonzept + +### Entwurfs- und Ausführungsplanung +- Schaltpläne, Detail- und Montagepläne, Kabellisten, Klemmpläne +- GAEB/Leistungsverzeichnisse, Massenermittlungen, Kostenschätzung +- Betreiber- & Wartungsanforderungen, Normenprüfung (ÖVE/ÖNORM/EN) +- Schnittstellenplanung PV ↔ Speicher ↔ WP ↔ EMS ↔ Ladeinfrastruktur + +### Energieausweis (Nichtwohn- & Wohngebäude) +- Bedarfsermittlung nach geltenden Normen +- Variantenvergleich (Hülle/Technik) inkl. **CO₂**- und Betriebskosteneffekte +- Dokumentation für **Förderstellen** und Behörden + +### Energiekonzepte +- PV‑Potenzial, Speicherstrategie, Eigenverbrauchsoptimierung +- Lastganganalyse, **Peak‑Shaving**, Tarifsimulation (fix/variabel) +- Elektromobilität: Lade- und Lastmanagement, Zähler- & Abrechnungslogik +- Roadmap zur **Dekarbonisierung** und TCO‑Optimierung + +### Studien +- Machbarkeits‑ & Standortstudien (Technik, Recht, Wirtschaftlichkeit) +- Netzrückwirkungen, Blindleistungs- & Transformatorauslegung +- Szenarien (Erweiterbarkeit, Redundanz, Black‑Start/Backup) + +--- + +## So arbeiten wir (Ablauf) +1. **Kick‑off & Zielbild** – Anforderungen, Daten, Randbedingungen +2. **Vorplanung** – Varianten, Grobdimensionierung, Budgetrahmen +3. **Einreichplanung** – genehmigungsfähige Unterlagen +4. **Ausführungsplanung** – Detailunterlagen & LV +5. **Vergabe & Umsetzung** – Unterstützung bei Ausschreibung, Bau, Inbetriebnahme + +--- + +## Ergebnisse (Deliverables) +- Pläne (DWG/PDF), Schemata, **LV/GAEB**, Berechnungen, Protokolle +- **Energieausweis** / Konzeptdokumentation +- Betreiber‑/Wartungsanforderungen & Abnahmechecklisten + +--- + +## Warum AMPERION? +- **Unabhängig & herstellerneutral** +- **Netzbetreiber‑erfahren** (NS/MS, Ladeparks, PV‑Großanlagen) +- **Skalierbar & zukunftssicher** geplant + +--- + +## FAQ – Planung +**Welche Unterlagen brauchen Sie zu Beginn?** +Bestandspläne, Lastgänge (falls vorhanden), Standortdaten, Ziele/Budgetrahmen. + +**Planen Sie auch Mittelspannung?** +Ja. Von der **Netzanschlussanfrage** bis zur Trafostation inkl. Schutzkonzept. + +**Übernehmen Sie die Ausschreibung?** +Ja, inkl. LV, Bieterfragen, Angebotsprüfung und Vergabeempfehlung. + +**Begleiten Sie die Bauphase?** +Gerne – siehe **Projektmanagement**. + +--- + +> **Nächster Schritt:** +> Kurzgespräch vereinbaren: **+43 677 620 90426** oder über [Kontakt](/kontakt/). diff --git a/content/german/Leistungen/projektmanagement.md b/content/german/Leistungen/projektmanagement.md new file mode 100644 index 0000000..cfa6b63 --- /dev/null +++ b/content/german/Leistungen/projektmanagement.md @@ -0,0 +1,72 @@ +--- +title: "Projektmanagement & Baukoordination" +description: "Baukoordination, begleitende Kontrolle, Bauherrnvertretung und Dokumentation – sicheres Projektmanagement für Elektrotechnik, PV, Speicher und Ladeinfrastruktur." +slug: "projektmanagement" +layout: "leistung" +date: 2025-07-29 +draft: false +tags: ["Projektmanagement", "Baukoordination", "begleitende Kontrolle", "Bauherrnvertretung", "Dokumentation", "Ladeinfrastruktur", "Photovoltaik"] +categories: ["Leistungen"] +--- + +# Projektmanagement, das trägt. + +Wir führen Ihre Energie‑ und Elektrotechnikprojekte **termintreu, kostensicher und regelkonform** zum Ziel – von der Vergabe bis zur Abnahme. Dabei vertreten wir konsequent die **Interessen des Bauherrn** und sichern Qualität durch **begleitende Kontrolle**. + +--- + +## Unsere Leistungen + +### Baukoordination +- Termin‑, Kosten‑ und Ressourcensteuerung +- Schnittstellenmanagement (Gewerke, Netzbetreiber, Behörden) +- Bauaufsicht & Sicherheitskoordination (SiGe, sofern beauftragt) + +### Begleitende Kontrolle +- Qualitäts‑, Normen‑ und Ausführungsprüfung +- Prüf‑ und Messprotokolle, FAT/SAT, **Inbetriebnahmesupport** +- Abweichungs‑ & Mängelmanagement, Abnahmevorbereitung + +### Bauherrnvertretung +- Interessenvertretung gegenüber AN/Planern/Netzbetreiber +- Vergabeunterstützung, Bietergespräche, **Change‑Request‑Steuerung** +- Kostencontrolling, Fortschritts‑ und Statusberichte + +### Dokumentation +- As‑built‑Unterlagen, Revisionspläne, Schaltschrank‑/Klemmenpläne +- Mess‑ und Prüfprotokolle, Abnahme‑/Übergabeunterlagen +- Betriebs‑ & Wartungsdokumentation + +--- + +## Ablauf & Tools +1. **Projektstruktur & Ziele** (Kick‑off) +2. **Termin‑ & Kostenplan** (Basislinie) +3. **Steuerung & Kontrolle** (Jour‑Fixe, Status, Risiko‑Log) +4. **Abnahmen & Übergabe** (Mängelfreiheit, Doku vollständig) + +Wir arbeiten transparent (z. B. **Bau‑/Qi‑Log**, Abweichungsberichte) und integrieren Ihre Tools. + +--- + +## Nutzen +- **Plan‑/Ist‑Sicherheit** bei Budget, Qualität, Termin +- **Reibungsfreie Koordination** komplexer Schnittstellen +- **Dokumentierte Abnahme** & störungsarmer Betrieb + +--- + +## FAQ – Projektmanagement +**Übernehmen Sie auch die Ausschreibung?** +Ja. LV‑Erstellung, Bieterfragen, Angebotsprüfung, Vergabeempfehlung. + +**Arbeiten Sie mit Generalunternehmern?** +Sowohl **GU** als auch Einzelvergabe – wir steuern die Schnittstellen. + +**Unterstützen Sie MS‑Anlagen & Ladeparks?** +Ja – inkl. Trafostation, Schutzprüfung, EMS/LMS‑Integration. + +--- + +> **Nächster Schritt:** +> Projekt besprechen: **+43 677 620 90426** oder über [Kontakt](/kontakt/). diff --git a/content/german/about.md b/content/german/about.md index 3b5d6cd..4049d44 100644 --- a/content/german/about.md +++ b/content/german/about.md @@ -1,11 +1,17 @@ --- title: "Wir sind AMPERION" -description: "Das AMPERION Gründerteam." -descriptiontwo: "Zwei Ingenieure. Eine Vision." +subtitle: "Technik mit Verantwortung. Planung mit Weitblick." bg_image: "" layout: "about" draft: false +intro_section: + enable: true + text: > + **AMPERION GmbH** ist ein *staatlich geprüftes Ingenieurbüro* und *konzessio­nierter Elektrotechnikbetrieb* mit Sitz in Niederösterreich. + Wir entwickeln nachhaltige Energielösungen für Unternehmen, Gemeinden, Bauträger – und auch Privatpersonen, die auf Qualität und Zukunftssicherheit setzen. + Dabei begleiten wir Projekte von der Idee bis zur Inbetriebnahme – **unabhängig**, **technisch fundiert** und **zukunftsorientiert**. + image: "images/amperion_intro.webp" ################################## About ##################################### about: diff --git a/layouts/_default/about.html b/layouts/_default/about.html index 869831a..765a7ff 100644 --- a/layouts/_default/about.html +++ b/layouts/_default/about.html @@ -2,52 +2,109 @@ {{ partial "page-title.html" . }} -{{ with .Params.about }} + +{{ with .Params.intro_section }} {{ if .enable }} -
-
+
+
+ + +
+

+ Technik mit Verantwortung. Planung mit Weitblick. +

+
+
-
-
- {{ with .left_person }} - {{ with .name }}

{{ . | markdownify }}

{{ end }} - {{ with .description }}

{{ . | $.Page.RenderString (dict "display" "block") }}

{{ end }} - {{ end }} + + +
+
+ {{ .text | markdownify }}
-
-
- Standard Image - Hover Image -
-
-
-
- {{ with .right_person }} - {{ with .name }}

{{ . | markdownify }}

{{ end }} - {{ with .description }}

{{ . | $.Page.RenderString (dict "display" "block") }}

{{ end }} - {{ end }} -
+ + +
+ AMPERION Intro
+
{{ end }} {{ end }} -
-
+ + + + + + +
+
+

+ Was uns auszeichnet: AMPERION bietet echte Mehrwerte für Ihr Projekt +

+
+ +
+
+ + +
+
+ Staatlich geprüft Icon +

Staatlich geprüftes Ingenieurbüro

+

Als konzessionierter Fachbetrieb für Elektrotechnik garantieren wir Fachkompetenz, Qualität und Sicherheit.

+
+
+ + +
+
+ Innovation Icon +

Erfahrung & Innovation

+

Über 10 Jahre Branchenerfahrung vereinen sich bei AMPERION mit frischen Ideen, neuesten Technologien und aktuellen Förderstandards.

+
+
+ + +
+
+ Ganzheitlicher Ansatz Icon +

Ganzheitlicher Ansatz

+

Wir betrachten jedes Projekt technisch, wirtschaftlich und ökologisch – von Beginn an zukunftssicher gedacht.

+
+
+ + +
+
+ Unabhängige Beratung Icon +

Unabhängige Beratung

+

Wir schlagen nur Lösungen vor, die zu Ihrem Projekt passen – herstellerneutral und objektiv.

+
+
+
+
+ + +
- - {{ with .Params.mission_vision }} {{ if .enable }}
@@ -65,10 +122,65 @@
- + +{{ with .Params.about }} +{{ if .enable }} +
+
+ + +

Das AMPERION Gründerteam

+ + +

+ Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte. +

+ + +
+ + +
+
+ {{ with .left_person }} + {{ with .name }}

{{ . | markdownify }}

{{ end }} + {{ with .description }} +

{{ . | $.Page.RenderString (dict "display" "block") }}

+ {{ end }} + {{ end }} +
+
+ + +
+ AMPERION Gründerteam +
+ + +
+
+ {{ with .right_person }} + {{ with .name }}

{{ . | markdownify }}

{{ end }} + {{ with .description }} +

{{ . | $.Page.RenderString (dict "display" "block") }}

+ {{ end }} + {{ end }} +
+
+ +
+
+
+{{ end }} +{{ end }} + + + {{ if .Params.cta.enable }} {{ partial "cta.html" . }} {{ end }} - -{{ end }} \ No newline at end of file +{{ end }} diff --git a/layouts/_default/leistung.html b/layouts/_default/leistung.html new file mode 100644 index 0000000..731a254 --- /dev/null +++ b/layouts/_default/leistung.html @@ -0,0 +1,44 @@ +{{ define "main" }} + + {{ partial "page-title.html" . }} + + + {{ with .Params.about }} + {{ if .enable }} +
+
+
+
+ {{ with .title }}

{{ . | markdownify }}

{{ end }} + {{ with .content }} +
{{ . | $.Page.RenderString (dict "display" "block") }}
+ {{ end }} +
+ {{ with .image }} +
+ +
+ {{ end }} +
+
+
+ {{ end }} + {{ end }} + + +
+
+
+
+ {{ .Content }} +
+
+
+
+ + + {{ if .Params.cta.enable }} + {{ partial "cta.html" . }} + {{ end }} + +{{ end }} diff --git a/layouts/index.html b/layouts/index.html index 28d7745..12a8b87 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,9 +1,4 @@ {{ define "main" }} -Um den ersten Bereich der Seite beim Scrollen nach unten verschwinden zu lassen und beim Scrollen nach ganz oben wieder erscheinen zu lassen, kannst du JavaScript verwenden, um den Bereich zu verstecken oder anzuzeigen, basierend auf der Scroll-Position. Hier ist, wie du das machen kannst: -Schritt 1: Füge eine ID oder Klasse zum Header hinzu - -Füge eine ID oder Klasse zum
-Element hinzu, damit du es leicht mit JavaScript ansprechen kannst. -
@@ -352,4 +347,5 @@ Füge eine ID oder Klasse zum
-Element hinzu, damit du es leicht mit Jav -{{ end }} \ No newline at end of file +{{ end }} + diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content index 95254e8..b6e413c 100644 --- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content +++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content @@ -18,21 +18,21 @@ body { -webkit-font-smoothing: antialiased; } h1, -h2, -h3, -h4, -h5, -h6 { - font-family: "Open Sans Semibold", sans-serif; } - -h1, -h2, h3, h4, h5, h6 { + font-family: "Open Sans Semibold", sans-serif; font-weight: 400; } +h2 { + font-family: "Open Sans Semibold", sans-serif; + font-weight: 400; + color: #046e6e; + font-size: 28px; } + @media (max-width: 480px) { + h2 { + font-size: 22px; } } h1 { font-size: 80px; } @media (max-width: 768px) { @@ -44,11 +44,6 @@ h1 { @media (max-width: 400px) { h1 { font-size: 26px; } } -h2 { - font-size: 28px; } - @media (max-width: 480px) { - h2 { - font-size: 22px; } } h3 { font-size: 20px; } @@ -56,7 +51,7 @@ h4 { font-size: 25px; } p { - color: #777777; + color: black; font-size: 15px; font-family: "Open Sans Semibold", sans-serif; } @@ -2535,169 +2530,72 @@ h2, h3 { .text-justify { text-align: justify; } -/* Reduziert den Abstand zwischen den Sections */ section { - margin-bottom: 0px; - /* Anpassung nach Bedarf */ } + margin-bottom: 0px; } -/* Zusätzliche optionale Stile für eine bessere Darstellung */ #welcome.section, #service.section { padding-top: 90px; - /* Anpassung nach Bedarf */ - padding-bottom: 4px; - /* Anpassung nach Bedarf */ } - -.text-justify { - text-align: justify; } + padding-bottom: 4px; } .description { font-size: 22px; - /* Standard Schriftgröße */ line-height: 1.5; padding-top: 90px; - /* Anpassung nach Bedarf */ - padding-bottom: 1px; - /* Anpassung nach Bedarf */ } + padding-bottom: 1px; } @media (max-width: 768px) { .description { font-size: 18px; - /* Kleinere Schriftgröße für Tablets */ - padding-top: 70px; - /* Anpassung nach Bedarf */ - padding-bottom: 1px; - /* Anpassung nach Bedarf */ } } + padding-top: 70px; } } @media (max-width: 480px) { .description { font-size: 16px; - /* Noch kleinere Schriftgröße für Handys */ - padding-top: 50px; - /* Anpassung nach Bedarf */ - padding-bottom: 1px; - /* Anpassung nach Bedarf */ } } + padding-top: 50px; } } .facts .fact-item { - padding: 15px; - /* Abstand um die Bilder */ } - -.facts .fact-item { - padding: 15px; - /* Abstand um die Bilder */ } + padding: 15px; } .fact-image { height: 250px; - /* Einheitliche Höhe für alle Bilder */ width: auto; - /* Breite automatisch anpassen, um das Seitenverhältnis beizubehalten */ object-fit: contain; - /* Bild innerhalb der festgelegten Höhe zuschneiden, um das Seitenverhältnis beizubehalten */ border-radius: 8px; - /* Abgerundete Ecken für die Bilder */ - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); - /* Leichter Schatten */ } + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .custom-background { background-size: cover; - background-position: center center; + background-position: center; background-repeat: no-repeat; } -.service-arrow .block { - display: flex; - align-items: center; - justify-content: space-between; } - -.service-content { - flex: 1; } - -.service-icon { - margin-right: 15px; - /* Abstand nach Bedarf anpassen */ } - -.service-image { - margin-left: 15px; - /* Abstand nach Bedarf anpassen */ } - -.service-image img { - max-width: 150px; - /* Maximale Breite des Bildes anpassen */ - height: auto; } - -.bg-service1 { - background-color: #8bcfd6; - /* Beispielhafte Farbe für primary-dark */ } - -.bg-service2 { - background-color: #6baeb5; - /* Beispielhafte Farbe für primary-dark */ } - -.bg-service3 { - background-color: #8bcfd6; - /* Beispielhafte Farbe für primary-dark */ } - -.bg-service4 { - background-color: #6baeb5; - /* Beispielhafte Farbe für primary-dark */ } - -.bg-service5 { - background-color: #8bcfd6; - /* Beispielhafte Farbe für primary-dark */ } - -.bg-service6 { - background-color: #6baeb5; - /* Beispielhafte Farbe für primary-dark */ } - -.bg-service7 { - background-color: #8bcfd6; - /* Beispielhafte Farbe für primary-dark */ } - -.bg-service8 { - background-color: #6baeb5; - /* Beispielhafte Farbe für primary-dark */ } - -.fixed-width { - width: 1200px; - /* Feste Breite, die du anpassen kannst */ - height: auto; - /* Höhe wird automatisch angepasst, um das Seitenverhältnis beizubehalten */ } - .service-arrow .block { display: flex; align-items: center; justify-content: space-between; padding: 20px; - /* Optional: Padding hinzufügen */ border-radius: 100px; - /* Optional: Abgerundete Ecken hinzufügen */ - color: #8a0909; - /* Optional: Textfarbe auf Weiß setzen */ } - -.service-icon { - margin-right: 0px; - /* Abstand nach Bedarf anpassen */ } + color: #8a0909; } .service-content { flex: 1; } -.service-image { - margin-left: 0px; - /* Abstand nach Bedarf anpassen */ } - -.fixed-text { - width: 600px; - /* Feste Breite für den Text */ - margin-right: 15px; - /* Optional: Abstand nach Bedarf anpassen */ } +.service-icon, .service-image { + margin: 0; } .service-image img { max-width: 600px; - /* Maximale Breite des Bildes anpassen */ height: auto; - margin: 0; - /* Entfernt zusätzliche Margins */ - padding: 0; - /* Entfernt zusätzliches Padding */ - border: none; - /* Entfernt jegliche Standardrahmen */ - display: block; - /* Verhindert zusätzliche Ränder bei inline-block-Elementen */ } + display: block; } + +.bg-service1, .bg-service3, .bg-service5, .bg-service7 { + background-color: #8bcfd6; } + +.bg-service2, .bg-service4, .bg-service6, .bg-service8 { + background-color: #6baeb5; } + +.fixed-width { + width: 1200px; } + +.fixed-text { + width: 600px; + margin-right: 15px; } .page-title::before { content: ''; @@ -2707,61 +2605,44 @@ section { width: 100%; height: 100%; background-color: #ffffff; - /* Weiß als Hintergrundfarbe */ - z-index: -1; - /* Sicherstellen, dass es hinter dem Inhalt liegt */ } + z-index: -1; } .service-grid { display: grid; gap: 30px; - /* 40px Abstand sowohl horizontal als auch vertikal */ - grid-template-columns: repeat(3, 1fr); - /* => Standard: 3 Spalten für größere Bildschirme */ } - -@media (max-width: 992px) { - .service-grid { - grid-template-columns: repeat(2, 1fr); - /* => mittlere Screens: nur 2 Spalten */ } } - -@media (max-width: 576px) { - .service-grid { - grid-template-columns: 1fr; - /* => kleine Screens: 1 Spalte */ } } - -/* Ab hier das Zoom-/Overlay-Setup (identisch wie vorher) */ + grid-template-columns: repeat(3, 1fr); } + @media (max-width: 992px) { + .service-grid { + grid-template-columns: repeat(2, 1fr); } } + @media (max-width: 576px) { + .service-grid { + grid-template-columns: 1fr; } } .service-item-fixed { width: 100%; - height: auto; - /* Oder "auto" falls die Höhe flexibel sein soll */ - position: relative; - overflow: hidden; border-radius: 10px; - /* Abgerundete Ecken */ } + overflow: hidden; + position: relative; } .zoom-wrap { + transition: transform 0.3s ease; width: 100%; height: 100%; - position: relative; - transition: transform 0.3s ease; } + position: relative; } .service-item-fixed:hover .zoom-wrap { transform: scale(1.06); } -.zoom-wrap a { - display: block; - /* Stellt sicher, dass der Link das gesamte umschlossene Element abdeckt */ - text-decoration: none; - /* Entfernt die Unterstreichung des Links */ - color: inherit; - /* Erbt die Textfarbe, um sicherzustellen, dass der Linktext stilistisch passt */ } - .zoom-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } -/* Das "dunkle Overlay" */ +.zoom-wrap a { + display: block; + text-decoration: none; + color: inherit; } + .zoom-wrap .overlay { position: absolute; top: 0; @@ -2769,11 +2650,7 @@ section { bottom: 0; left: 0; background: rgba(0, 0, 0, 0.4); - /* dunkler Schleier (30% schwarz) */ - z-index: 1; - /* Overlay unter dem Text, aber über dem Bild */ - pointer-events: auto; - /* Stellt sicher, dass das Overlay klickbar ist */ } + z-index: 1; } .overlay-text { position: absolute; @@ -2784,8 +2661,7 @@ section { font-size: 2.3em; font-weight: bold; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); - z-index: 2; - /* Höher als das Overlay */ } + z-index: 2; } .my-container { width: 80%; @@ -2793,36 +2669,27 @@ section { .gif-background { background-image: url("/images/BackgroundAnimation.svg"); - /* Pfad zu Ihrem GIF */ background-size: cover; - /* Deckt den gesamten Hintergrund ab */ background-position: center -220px; - /* Positioniert das GIF oben in der Mitte */ background-repeat: no-repeat; - /* Verhindert die Wiederholung des GIFs */ - position: relative; - /* Stellt sicher, dass das Overlay korrekt positioniert wird */ } + position: relative; } .gif-background::after { - content: ""; + content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background-color: rgba(255, 255, 255, 0.8); - /* Weißer Overlay mit 70% Deckkraft */ - pointer-events: none; - /* Stellt sicher, dass das Overlay keine Interaktionen blockiert */ } + background-color: rgba(255, 255, 255, 0.8); } .custom-image { width: 100px; - height: auto; - max-width: 70%; } + max-width: 70%; + height: auto; } .custom-title { - color: #046e6e; - /* Ersetze dies mit der Farbe deiner Wahl */ } + color: #046e6e; } .hover-link { transition: color 0.3s ease; } @@ -2830,6 +2697,45 @@ section { .hover-link:hover { color: #F5A623; } +/* Mehrwert */ +.mehrwerte-grid { + display: grid; + gap: 0; + grid-template-columns: repeat(1, 1fr); } + @media (min-width: 768px) { + .mehrwerte-grid { + grid-template-columns: repeat(2, 1fr); } } + @media (min-width: 1200px) { + .mehrwerte-grid { + grid-template-columns: repeat(4, 1fr); } } +.mehrwerte-box { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + padding: 30px; + border-radius: 8px; + transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } + .mehrwerte-box:hover { + background-color: teal; + transform: translateY(-4px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } + .mehrwerte-box h4, + .mehrwerte-box p { + color: #000 !important; + transition: color 0.3s ease; } + .mehrwerte-box:hover h4, .mehrwerte-box:hover p { + color: #000 !important; } + +.mehrwert-icon { + filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%); } + +/* Gründerteam Styling */ +.container-fluid { + max-width: 100%; + padding-left: 5vw; + padding-right: 5vw; } + html { scroll-behavior: smooth; } diff --git a/static/icons/brain.svg b/static/icons/brain.svg new file mode 100644 index 0000000..e78868e --- /dev/null +++ b/static/icons/brain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/briefcase-business.svg b/static/icons/briefcase-business.svg new file mode 100644 index 0000000..f294615 --- /dev/null +++ b/static/icons/briefcase-business.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/earth.svg b/static/icons/earth.svg new file mode 100644 index 0000000..75d5200 --- /dev/null +++ b/static/icons/earth.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/stamp.svg b/static/icons/stamp.svg new file mode 100644 index 0000000..3713b1c --- /dev/null +++ b/static/icons/stamp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/images/amperion_intro.webp b/static/images/amperion_intro.webp new file mode 100644 index 0000000..9b4051e Binary files /dev/null and b/static/images/amperion_intro.webp differ diff --git a/themes/airspace-hugo/assets/scss/custom.scss b/themes/airspace-hugo/assets/scss/custom.scss index 383fd3d..f527966 100644 --- a/themes/airspace-hugo/assets/scss/custom.scss +++ b/themes/airspace-hugo/assets/scss/custom.scss @@ -1 +1,17 @@ // Add your custom code +.hover-tile { + transition: background-color 0.3s ease; +} + +.hover-tile:hover { + filter: brightness(1.15); + cursor: default; +} +.hover-tile { + transition: background-color 0.3s ease; +} + +.hover-tile:hover { + filter: brightness(1.15); + cursor: default; +}