diff --git a/assets/IMG_News1.png b/assets/IMG_News1.png
new file mode 100644
index 0000000..2d93756
Binary files /dev/null and b/assets/IMG_News1.png differ
diff --git a/assets/germandrones_logo.svg b/assets/germandrones_logo.svg
deleted file mode 100644
index 3687c12..0000000
--- a/assets/germandrones_logo.svg
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-german drones
-
-
-
-
\ No newline at end of file
diff --git a/assets/giz_logo.svg b/assets/giz_logo.svg
deleted file mode 100644
index aea076f..0000000
--- a/assets/giz_logo.svg
+++ /dev/null
@@ -1,123 +0,0 @@
-
-
-
-
-
-
-
- image/svg+xml
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/assets/logo-1.svg b/assets/logo-1.svg
new file mode 100644
index 0000000..6471d09
--- /dev/null
+++ b/assets/logo-1.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/assets/logo-2.svg b/assets/logo-2.svg
new file mode 100644
index 0000000..24db577
--- /dev/null
+++ b/assets/logo-2.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/assets/logo-3.svg b/assets/logo-3.svg
new file mode 100644
index 0000000..84fb0b1
--- /dev/null
+++ b/assets/logo-3.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/assets/logo-4.svg b/assets/logo-4.svg
new file mode 100644
index 0000000..eed52eb
--- /dev/null
+++ b/assets/logo-4.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/css/style.css b/css/style.css
index 0f0fbca..c9acd03 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,131 +1,3 @@
-/* =====================
-GLOBAL SECTION STYLING
-===================== */
-
-
-section:not(.company):not(.hero),
-footer {
- width: 100%;
- max-width: 1440px;
- margin: 0 auto;
- padding: 8vw;
- box-sizing: border-box;
-}
-
-/* =====================
-HERO
-===================== */
-.hero {
- width: 100%;
- height: min(80vh, 610px);
- background-size: cover;
- background-position: center;
- display: flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- overflow: hidden;
-}
-
-
-.hero-title {
- font-size: clamp(36px, 6vw, 96px);
-}
-
-.hero-subline {
- font-size: clamp(14px, 1.5vw, 18px);
- line-height: 1.8;
-}
-
-
-.hero-button,
-.news-button,
-.contact-button {
- font-size: clamp(14px, 1vw, 18px);
- padding: clamp(8px, 1vw, 16px) clamp(16px, 2vw, 32px);
-}
-
-/* =====================
-SERVICES GRID
-===================== */
-.services-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 30%, 320px), 1fr));
- justify-content: center;
- gap: 48px;
-}
-
-
-/* =====================
-COMPANY SECTION
-===================== */
-.company-content {
- display: grid;
- grid-template-columns: 1fr;
- gap: 0vw;
- padding: 0 4vw;
-}
-
-
-.company-text {
- display: grid;
- grid-template-columns: 1fr;
- gap: 2vw;
-}
-
-.company img {
- width: 100%;
- height: auto;
- object-fit: cover;
-}
-
-/* =====================
-FOOTER
-===================== */
-.footer-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
- gap: clamp(16px, 2vw, 40px);
- padding: clamp(20px, 4vw, 80px);
-}
-
-/* =====================
-MEDIA QUERIES
-===================== */
-@media (max-width: 1024px) {
- .hero {
- height: 60vh;
- }
- .news-slide {
- grid-template-columns: 1fr;
- height: auto;
- }
-}
-
-@media (max-width: 768px) {
- .hero {
- height: 50vh;
- padding: 5vw;
- }
- .hero-title {
- font-size: clamp(28px, 6vw, 48px);
- }
- .hero-subline {
- font-size: clamp(12px, 3vw, 16px);
- }
-}
-
-@media (max-width: 480px) {
- header .nav {
- padding: 0 4vw;
- }
- .hero-button,
- .news-button {
- font-size: 14px;
- padding: 8px 16px;
- }
-}
-
/* =====================
GENERAL
===================== */
@@ -143,22 +15,29 @@ html {
body {
color: #151515;
- overflow-x: hidden
+ overflow-x: hidden;
+ padding-top: 109px;
}
-
+html, body {
+ width: 100%;
+ max-width: 100%;
+ overflow-x: hidden;
+}
/* =====================
-HEADER / NAV - DESKTOP
+HEADER / NAV
===================== */
header {
- position: sticky;
+ position: fixed;
top: 0;
+ left: 0;
+ width: 100%;
+ height: 109px;
background: white;
border-bottom: 1px solid #eee;
- z-index: 999;
- height: 109px;
+ z-index: 9999;
}
.nav {
@@ -185,9 +64,9 @@ header {
.nav-links {
display: flex;
- gap: 32px;
+ gap: 32px;
font-size: 24px;
- font-weight: 500;
+ font-weight: 500;
align-items: center;
}
@@ -198,89 +77,36 @@ header {
}
.nav-links a.active {
- font-weight: 800;
+ font-weight: 800;
color: #151515;
}
.lang-switch span {
cursor: pointer;
font-size: 16px;
- font-weight: 500;
+ font-weight: 500;
transition: font-weight 0.2s ease;
}
.lang-switch span.active {
- font-weight: 700;
+ font-weight: 700;
}
.burger {
display: none;
}
-/* =====================
-MOBILE
-===================== */
-@media (max-width: 1024px) {
-
- .nav-links {
- display: none;
- }
-
- .mobile-menu {
- display: flex;
- align-items: center;
- gap: 12px;
- margin-left: auto;
- }
-
- .burger {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- width: 24px;
- height: 18px;
- cursor: pointer;
- }
-
- .burger span {
- display: block;
- height: 3px;
- width: 100%;
- background: #151515;
- border-radius: 2px;
- transition: all 0.3s ease;
- }
-
- .lang-switch {
- display: flex;
- align-items: center;
- gap: 9px;
- cursor: pointer;
- }
-
- .nav.open .nav-links {
- display: flex;
- flex-direction: column;
- position: absolute;
- top: 100%;
- left: 0;
- right: 0;
- background: white;
- padding: 20px;
- gap: 16px;
- border-bottom: 1px solid #eee;
- z-index: 998;
- }
-}
-
/* =====================
SECTIONS
===================== */
-section:not(.company):not(.hero) {
- max-width: 1440px;
- margin: 0 auto;
- padding: 120px 180px;
+section:not(.company):not(.hero),
+footer {
+ width: 100%;
+ max-width: 1440px;
+ margin-inline: auto;
+ padding-inline: clamp(16px, 6vw, 180px);
+ padding-block: clamp(80px, 8vw, 120px);
box-sizing: border-box;
}
@@ -289,19 +115,20 @@ HERO
===================== */
.hero {
- position: relative;
- width: 100%;
- max-width: 100%;
- height: 610px;
+ position: relative;
+ width: 100%;
+ max-width: 100%;
+ height: 610px;
background-image: url("../assets/hero-bg.png");
- background-size: cover;
+ background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
- overflow: hidden;
+ overflow: hidden;
+ isolation: isolate;
}
/* ================= HERO BOXES ================= */
@@ -315,50 +142,64 @@ HERO
pointer-events: none;
}
-/* Right green box (same as before) */
+/* Rechte grüne Fläche */
.hero::before {
- width: 662px;
- height: 954px;
- background: #7FD332;
- transform: rotate(-14deg) translateY(-50%);
- right: -400px;
- z-index: 1;
+ width: 900px;
+ height: 900px;
+ background-color: #7FD332;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cline x1='0%25' y1='75%25' x2='100%25' y2='55%25' stroke='white' stroke-width='1'/%3E%3Cline x1='0%25' y1='60%25' x2='100%25' y2='85%25' stroke='white' stroke-width='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
+ transform: rotate(-14deg) translateY(-50%);
+ right: -700px;
+ z-index: 1;
}
+/* Linke weiße Fläche */
.hero::after {
- width: 492px;
- height: 955px;
- background: #fff;
- transform: rotate(-10.86deg) translateY(-50%);
- left: -250px;
- z-index: 1;
-
-
+ width: 900px;
+ height: 900px;
+ background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cline x1='0%25' y1='75%25' x2='100%25' y2='55%25' stroke='black' stroke-width='1'/%3E%3Cline x1='0%25' y1='60%25' x2='100%25' y2='85%25' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
+ transform: rotate(-10.86deg) translateY(-50%);
+ left: -700px;
+ margin-top: 80px;
+ z-index: 1;
}
-@media (max-width: 1024px) {
+/* Overlay liegt über den Dekoflächen */
+.hero-overlay {
+ position: relative;
+ z-index: 2;
+ max-width: clamp(400px, 45vw, 700px);
+ padding: 20px;
+}
+
+/* Fluid: ab 1589px reinfahren, bei 1024px auf -750px */
+@media (max-width: 1589px) {
.hero::before {
- right: -500px;
+ right: calc(-700px + ((1589 - 100vw / 1px) / (1589 - 1024)) * (-750 + 700) * -1px);
}
.hero::after {
- left: -350px;
+ left: calc(-700px + ((1589 - 100vw / 1px) / (1589 - 1024)) * (-750 + 700) * -1px);
}
}
-.hero-overlay {
- max-width: 800px;
- padding: 20px;
+/* Ab 1024px: fix außerhalb */
+@media (max-width: 1024px) {
+ .hero::before {
+ right: -750px;
+ }
+ .hero::after {
+ left: -750px;
+ }
}
.hero-title {
font-family: "League Spartan", sans-serif;
- font-weight: 600;
+ font-weight: 600;
font-size: 96px;
color: #ffffff;
margin-bottom: 24px;
@@ -378,21 +219,20 @@ HERO
background: #7FD332;
color: #151515;
border: 1px solid #151515;
- padding: 14px 32px;
+ padding: 14px 32px;
text-decoration: none;
display: inline-block;
- transition: all 0.3s ease;
+ transition: all 0.3s ease;
overflow: hidden;
- letter-spacing: 0;
+ letter-spacing: 0;
}
-/* Arrow */
.hero-button::after {
- content: "→";
+ content: "→";
position: absolute;
- right: 16px;
+ right: 16px;
top: 50%;
- transform: translateY(-50%) translateX(10px);
+ transform: translateY(-50%) translateX(10px);
opacity: 0;
transition: all 0.3s ease;
font-weight: bold;
@@ -401,7 +241,7 @@ HERO
.hero-button:hover {
background: #F0F9E9;
color: #151515;
- padding-right: 40px;
+ padding-right: 40px;
}
.hero-button:hover::after {
@@ -409,33 +249,46 @@ HERO
opacity: 1;
}
-@media (max-width: 1024px) {
-
- .hero {
- height: 520px;
- }
-
- .hero-title {
- font-size: 72px;
- }
+/* =====================
+NEWS BUTTON
+===================== */
+.news-button {
+ position: relative;
+ font-family: "League Spartan", sans-serif;
+ background: #7FD332;
+ color: #151515;
+ border: 1px solid #151515;
+ padding: 14px 2px 14px 16px;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ transition: all 0.3s ease;
+ overflow: hidden;
+ letter-spacing: 0;
+ width: auto;
+ white-space: nowrap;
}
-@media (max-width: 768px) {
+.news-button::after {
+ content: "→";
+ display: inline-block;
+ font-weight: bold;
+ transform: translateX(4px);
+ opacity: 0;
+ transition: all 0.3s ease;
+}
- .hero {
- height: 80vh;
- padding: 40px 20px;
- }
-
- .hero-title {
- font-size: 48px;
- }
-
- .hero-subline {
- font-size: 14px;
- }
+.news-button:hover {
+ background: #F0F9E9;
+ color: #151515;
+ padding-right: 28px;
+}
+.news-button:hover::after {
+ transform: translateX(0);
+ opacity: 1;
}
/* =====================
@@ -448,64 +301,13 @@ NEWS
margin-bottom: 40px;
}
-
-
-/* =====================
-NEWS BUTTON
-===================== */
-
-.news-button {
- position: relative;
- font-family: "League Spartan", sans-serif;
- background: #7FD332;
- color: #151515;
- border: 1px solid #151515;
- padding-top: 14px;
- padding-bottom: 14px;
- padding-left: 16px;
- padding-right: 2px;
- text-decoration: none;
- display: inline-flex;
- align-items: center;
- gap: 8px;
- transition: all 0.3s ease;
- overflow: hidden;
- letter-spacing: 0;
- width: auto;
- white-space: nowrap;
-}
-
-/* Arrow */
-.news-button::after {
- content: "→";
- display: inline-block;
- font-weight: bold;
- transform: translateX(4px);
- opacity: 0;
- transition: all 0.3s ease;
-}
-
-.news-button:hover {
- background: #F0F9E9;
- color: #151515;
- padding-right: 28px;
-}
-
-.news-button:hover::after {
- transform: translateX(0);
- opacity: 1;
-}
-
-
-
.news {
width: 100%;
padding: 80px 0;
}
.news-container {
- max-width: 1080px;
- margin: auto;
+ max-width: 1080px;
}
.news-slider {
@@ -516,45 +318,39 @@ NEWS BUTTON
.news-track {
display: flex;
transition: transform 0.6s ease;
- background-color:#F0F9E9;
+ background-color: #F0F9E9;
}
.news-slide {
display: grid;
grid-template-columns: 1fr 1fr;
- gap: 32px;
- height: 540px;
- min-width: 100%;
+ min-height: 400px;
+ min-width: 100%;
box-sizing: border-box;
- background-color:#F0F9E9;
+ background-color: #F0F9E9;
border-right: 1px solid #7FD332;
+ border-left: 1px solid #7FD332;
}
.news-media {
- position: relative;
- width: 100%;
- height: 100%;
- clip-path: polygon(
- 0 0,
- 100% 0,
- 75% 100%,
- 0 100%
- );
- overflow: hidden;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
+ overflow: hidden;
}
.news-media::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
-
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cline x1='0%25' y1='100%25' x2='100%25' y2='75%25' stroke='white' stroke-width='1.5'/%3E%3Cline x1='50%25' y1='100%25' x2='100%25' y2='50%25' stroke='%237FD332' stroke-width='1.5'/%3E%3C/svg%3E");
- background-size: cover;
- background-repeat: no-repeat;
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cline x1='0%25' y1='100%25' x2='100%25' y2='75%25' stroke='white' stroke-width='1.5'/%3E%3Cline x1='50%25' y1='100%25' x2='100%25' y2='50%25' stroke='%237FD332' stroke-width='1.5'/%3E%3C/svg%3E");
+ background-size: cover;
+ background-repeat: no-repeat;
}
.news-media img {
@@ -567,16 +363,17 @@ NEWS BUTTON
.news-content {
display: flex;
flex-direction: column;
- justify-content: center;
- align-items: flex-start;
- padding: 0 24px;
- height: 100%;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding: clamp(20px, 5vw, 40px);
+ gap: 16px;
}
.news-title {
font-family: "League Spartan", sans-serif;
font-weight: 700;
font-size: 32px;
+ line-height: 125%;
color: #7FD332;
margin-bottom: 16px;
}
@@ -620,15 +417,13 @@ NEWS BUTTON
background: #F0F9E9;
}
-
-
/* =====================
SERVICES
===================== */
#services {
- margin-top: 80px;
- margin-bottom: 160px;
+ margin-top: 80px;
+ margin-bottom: 160px;
}
.services-header {
@@ -646,16 +441,14 @@ SERVICES
margin-bottom: 24px;
}
-/* SERVICES GRID */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: 48px;
+ gap: 48px;
}
-/* SERVICE BOX */
.service-box {
- min-height: 468px;
+ min-height: 468px;
background: #F8FBF5;
padding: 16px;
transition: all 0.3s ease;
@@ -669,7 +462,6 @@ SERVICES
border-right: 1px solid transparent;
}
-/* IMAGE */
.service-box img {
width: 100%;
height: 224px;
@@ -677,15 +469,13 @@ SERVICES
transition: all 0.3s ease;
}
-/* TITLE */
.service-title {
font-size: 32px;
margin-top: 16px;
transition: color 0.3s;
- color: #000000;
+ color: #000000;
}
-/* ARROW */
.service-arrow {
position: absolute;
bottom: 16px;
@@ -696,10 +486,8 @@ SERVICES
font-weight: 400;
}
-
-/* TEXT */
.service-text {
- max-height: 0;
+ max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, margin-top 0.5s ease;
font-size: 18px;
@@ -708,7 +496,6 @@ SERVICES
color: #7FD332;
}
-/* HOVER / OPEN */
.service-box:hover,
.service-box.open {
background: #F0F9E9;
@@ -716,58 +503,50 @@ SERVICES
border-right: 1px solid #7FD332;
}
-.service-box:hover .service-arrow {
+.service-box:hover .service-title,
+.service-box:hover .service-arrow,
+.service-box.open .service-title,
+.service-box.open .service-arrow,
+.service-box.closing .service-title,
+.service-box.closing .service-arrow {
color: #7FD332;
+}
+
+.service-box:hover .service-arrow {
font-weight: 1000;
transform: scale(1.6);
}
.service-box.closing .service-arrow {
- color: #7FD332;
font-weight: 600;
transform: scale(1.6);
}
-.service-box:hover .service-title,
-.service-box:hover .service-arrow {
- color: #7FD332;
-}
-
-.service-box.open .service-title,
-.service-box.open .service-arrow {
- color: #7FD332;
- opacity: 1;
-}
-
.service-box.open .service-arrow {
opacity: 0;
}
-.service-box.closing .service-title,
-.service-box.closing .service-arrow {
- color: #7FD332;
-}
-
.service-box.open .service-text {
- max-height: 500px;
- margin-top: 24px;
+ max-height: 500px;
+ margin-top: 24px;
}
-
/* =====================
COMPANY
===================== */
.company {
- background: #F0F9E9;
+ background: #F0F9E9;
width: 100%;
- padding: 160px 96px;
+ padding: 160px 96px;
}
.company-content {
- max-width: 1440px;
- margin: 0 auto;
- padding: 0 180px;
+ display: grid;
+ grid-template-columns: 1fr;
+ padding: 0 4vw;
+ max-width: 1440px;
+ margin: 0 auto;
box-sizing: border-box;
}
@@ -783,132 +562,52 @@ COMPANY
.company-text {
font-size: 18px;
- text-align: justify;
- line-height: 1.7;
- hyphens: auto;
+ text-align: justify;
+ line-height: 1.7;
+ hyphens: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 104px;
margin-top: 40px;
+ margin-bottom: 56px;
}
.company img {
- margin-top: 0px;
width: 100%;
- height: 270px;
+ height: auto;
object-fit: cover;
}
-@media (max-width: 1440px) {
- .company-content {
- padding: 0 40px;
- }
-}
-
/* =====================
DIVIDER 1
-===================== */
+===================== */
#divider-1 {
width: 100%;
height: 102px;
background-color: #7FD332;
-
- clip-path: polygon(
- 0 0,
- 100% 0,
- 100% 51%,
- 0 100%
- );
+ clip-path: polygon(0 0, 100% 0, 100% 51%, 0 100%);
}
-
-/* =====================
-CLIENTS
-===================== */
-
-#clients {
- max-width: 1440px;
- margin: 0 auto;
- padding: 0 180px;
- box-sizing: border-box;
-}
-
-#clients h2 {
- margin-top: 180px;
- font-size: 48px;
- margin-bottom: 56px;
- text-align: left;
-}
-
-.logo-scroll {
- width: 100%;
- margin-left: calc(50% - 50vw);
-}
-
-.logo-track {
- display: flex;
- justify-content: space-between;
- align-items: center;
-
- width: 100%;
- padding: 0 180px;
- box-sizing: border-box;
-}
-
-/* LOGOS */
-.logo-track img {
- width: 22%;
- max-height: 70px;
- object-fit: contain;
-
- opacity: 0.7;
-
- transition:
- transform 0.35s ease,
- filter 0.35s ease,
- opacity 0.35s ease;
-}
-
-/* HOVER EFFECT */
-.logo-track img:hover {
- transform: scale(1.15);
- filter: brightness(0) saturate(100%)
- invert(68%) sepia(70%)
- saturate(450%)
- hue-rotate(55deg)
- brightness(95%) contrast(90%);
- opacity: 1;
-}
-
-.logo-track:hover img {
- opacity: 0.3;
-}
-
-.logo-track img:hover {
- opacity: 1;
-}
-
-
/* =====================
CONTACT
===================== */
#contact h2 {
- margin-top: 180px;
- font-size: 48px;
- margin-bottom: 24px;
+ margin-top: 180px;
+ font-size: 48px;
+ margin-bottom: 24px;
}
#contact h3 {
- font-size: 36px;
- margin-bottom: 16px;
+ font-size: 36px;
+ margin-bottom: 16px;
}
#contact p {
- font-size: 18px;
- margin-bottom: 56px;
- line-height: 1.7;
+ font-size: 18px;
+ margin-bottom: 56px;
+ line-height: 1.7;
}
.content-box {
@@ -916,18 +615,18 @@ CONTACT
max-width: 400px;
min-height: 190px;
padding: 36px;
- border-left: 1px solid #7FD332;
+ border-left: 1px solid #7FD332;
border-right: 1px solid #7FD332;
}
.contact-options {
- display: flex;
- align-items: center;
- gap: 16px;
+ display: flex;
+ align-items: flex-start;
+ gap: 16px;
}
.content-box > *:not(h3) {
- margin-top: 16px;
+ margin-top: 16px;
}
.contact-link {
@@ -935,7 +634,8 @@ CONTACT
font-size: 18px;
color: #151515;
text-decoration-line: underline;
- transition: color 0.3s ease;
+ transition: color 0.3s ease;
+ text-align: left;
}
.contact-link:hover {
@@ -949,19 +649,18 @@ CONTACT
background: #7FD332;
color: #151515;
border: 1px solid #151515;
- padding: 14px 32px;
+ padding: 14px 32px;
text-decoration: none;
display: inline-block;
- transition: all 0.3s ease;
+ transition: all 0.3s ease;
overflow: hidden;
- letter-spacing: 0;
+ letter-spacing: 0;
}
-/* Arrow */
.contact-button::after {
- content: "→";
+ content: "→";
position: absolute;
- right: 16px;
+ right: 16px;
top: 50%;
transform: translateY(-50%) translateX(10px);
opacity: 0;
@@ -972,7 +671,7 @@ CONTACT
.contact-button:hover {
background: #F0F9E9;
color: #151515;
- padding-right: 40px;
+ padding-right: 40px;
}
.contact-button:hover::after {
@@ -980,15 +679,13 @@ CONTACT
opacity: 1;
}
-
-
/* =====================
CAREER
===================== */
#career h2 {
- font-size: 48px;
- margin-bottom: 24px;
+ font-size: 48px;
+ margin-bottom: 24px;
}
#career h3 {
@@ -997,9 +694,9 @@ CAREER
}
#career p {
- font-size: 18px;
- margin-bottom: 56px;
- line-height: 1.7;
+ font-size: 18px;
+ margin-bottom: 56px;
+ line-height: 1.7;
}
/* =====================
@@ -1010,36 +707,30 @@ DIVIDER 2
width: 100%;
height: 192px;
background-color: #7FD332;
-
- clip-path: polygon(
- 0 50%,
- 100% 0,
- 100% 100%,
- 0 100%
- );
+ clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
}
/* =====================
FOOTER
===================== */
+
footer {
padding: 80px 180px;
}
.footer-grid {
display: grid;
- grid-template-columns: repeat(5, 1fr); /* desktop layout */
+ grid-template-columns: repeat(5, 1fr);
gap: 40px;
align-items: start;
}
-/* Footer logo */
#footer-logo {
width: 364px;
max-width: 100%;
+ margin-bottom: 40px;
}
-/* Footer links */
.footer-grid h4 {
font-size: 24px;
margin-bottom: 16px;
@@ -1051,7 +742,6 @@ footer {
color: #7FD332;
}
-/* Copyright */
.copyright {
margin-top: 96px;
border-top: 1px solid #7FD332;
@@ -1060,68 +750,6 @@ footer {
color: #7FD332;
}
-/* =====================
-RESPONSIVE FOOTER - LEFT ALIGNED
-===================== */
-@media (max-width: 1024px) {
- .footer-grid {
- display: grid;
- grid-template-columns: 1fr; /* stack items vertically */
- gap: 32px;
- text-align: left; /* keep everything left-aligned */
- }
-
- #footer-logo {
- order: -1; /* logo appears first */
- margin: 0 0 16px 0; /* spacing below logo */
- width: 280px; /* adjust size */
- }
-
- .footer-grid div {
- display: block; /* stack link sections */
- }
-
- .footer-grid a {
- display: block;
- margin-bottom: 8px; /* spacing between links */
- }
-}
-
-@media (max-width: 768px) {
- footer {
- padding: 60px 20px;
- }
-
- #footer-logo {
- width: 200px;
- margin-bottom: 12px;
- }
-}
-
-@media (max-width: 1024px) and (min-width: 768px) {
- .footer-grid a {
- margin-bottom: -2px; /* reduce spacing between links */
- line-height: 1; /* tighter line spacing */
- }
-}
-
-@media (max-width: 768px) {
- .footer-grid {
- grid-template-columns: 1fr; /* stacked layout */
- gap: 16px; /* spacing between sections */
- }
-
- .footer-grid a {
- margin-bottom: 4px; /* small space between links */
- line-height: 1.3; /* tighter line height */
- }
-
- .footer-grid h4 {
- margin-bottom: 8px; /* slightly closer heading to links */
- }
-}
-
-
/* =====================
LEGALS
===================== */
@@ -1130,275 +758,166 @@ LEGALS
width: 300px;
margin-top: 58px;
margin-left: 180px;
- display: block;
- padding: 0;
- box-sizing: content-box;
+ display: block;
+ padding: 0;
+ box-sizing: content-box;
}
#impressum, #datenschutz {
- margin-left: 0px;
+ margin-left: 0;
}
#impressum h1, #datenschutz h1 {
- padding-bottom: 0px;
+ padding-bottom: 0;
}
#impressum h2, #datenschutz h2 {
-padding-top: 36px;
+ padding-top: 36px;
padding-bottom: 24px;
}
-#impressum p, #datenschutz p, #impressum ul, #datenschutz ul {
- line-height: 1.7;
- font-size: 18px;
+#impressum p, #datenschutz p,
+#impressum ul, #datenschutz ul {
+ line-height: 1.7;
+ font-size: 18px;
}
#impressum a, #datenschutz a {
- color:#7FD332;
+ color: #7FD332;
+}
+
+img, video, svg {
+ max-width: 100%;
+ height: auto;
}
/* ======================================
-RESPONSIVE FOUNDATION
-(does NOT change desktop)
+RESPONSIVE
====================================== */
-/* ---------- TABLET ---------- */
+/* ---------- 1200px ---------- */
@media (max-width: 1200px) {
- section:not(.hero),
- footer {
+ section:not(.hero), footer {
padding-left: 80px;
padding-right: 80px;
}
+ .footer-grid {
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+ gap: 32px;
+ }
+
}
-/* ---------- SMALL TABLET ---------- */
+/* ---------- 1024px ---------- */
@media (max-width: 1024px) {
- section:not(.hero),
- footer {
+ section:not(.hero), footer {
padding-left: 48px;
padding-right: 48px;
}
-}
-
-/* ---------- MOBILE ---------- */
-@media (max-width: 768px) {
-
- section:not(.hero),
- footer {
- padding-left: 20px;
- padding-right: 20px;
- padding-top: 80px;
- padding-bottom: 80px;
- }
-
-}
-
-@media (max-width: 768px) {
-
.hero {
- height: 100vh;
+ height: 520px;
}
- .hero-overlay {
- transform: scale(1.05);
+ .hero-title {
+ font-size: 72px;
}
-}
-
-@media (max-width: 768px) {
-
.news-slide {
grid-template-columns: 1fr;
height: auto;
}
- .news-media {
- height: 260px;
- clip-path: none;
- }
-
- .news-content {
- padding: 24px 0;
- }
-
-}
-
-/* Keep desktop layout until 32px total padding (16px each side) */
-@media (max-width: calc(300px * 3 + 48px * 2 + 32px)) {
- .services-grid {
- grid-template-columns: 1fr; /* only switch to single column at tiny screens */
- gap: 24px;
- padding-left: 16px;
- padding-right: 16px;
- }
-}
-
-@media (max-width: 1024px) {
-
.company-text {
grid-template-columns: 1fr;
gap: 32px;
}
-}
-
-@media (max-width: 768px) {
-
- .company {
- padding: 120px 20px;
+ .footer-grid {
+ grid-template-columns: 1fr;
+ gap: 32px;
+ text-align: left;
}
- .company img {
- height: 220px;
+ #footer-logo {
+ order: -1;
+ margin: 0 0 48px 0;
+ width: 280px;
}
-}
-
-@media (max-width: 768px) {
-
- .logo-track {
- padding: 0 20px;
- gap: 40px;
- overflow-x: auto;
+ .footer-grid div {
+ display: block;
}
- .logo-track img {
- width: 160px;
- flex-shrink: 0;
+ .footer-grid a {
+ display: block;
+ margin-bottom: 8px;
}
-}
-
-@media (max-width: 768px) {
-
- .content-box {
- width: 100%;
+ .nav-links {
+ display: none;
}
- .contact-options {
- flex-direction: row;
+ .mobile-menu {
+ display: flex;
+ align-items: center;
gap: 12px;
+ margin-left: auto;
+ }
+
+ .burger {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ width: 24px;
+ height: 18px;
+ cursor: pointer;
+ }
+
+ .burger span {
+ display: block;
+ height: 3px;
+ width: 100%;
+ background: #151515;
+ border-radius: 2px;
+ transition: all 0.3s ease;
+ }
+
+ .lang-switch {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ cursor: pointer;
+ }
+
+ .nav.open .nav-links {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: white;
+ padding: 20px;
+ gap: 16px;
+ border-bottom: 1px solid #eee;
+ z-index: 998;
}
}
-@media (max-width: 768px) {
-
- .footer-grid {
- grid-template-columns: 1fr;
- gap: 40px;
- text-align: left;
- }
-
- #footer-logo {
- width: 200px;
- }
-
-}
-
-@media (max-width: 768px) {
-
- header {
- height: 80px;
- }
-
- .nav {
- padding: 0 20px;
- }
-
- .logo img {
- height: 36px;
- }
-
-}
-
-/* =====================
-FOOTER RESPONSIVE
-===================== */
-
-/* Tablet / kleine Desktop-Viewports */
-@media (max-width: 1200px) {
- footer {
- padding-left: 80px;
- padding-right: 80px;
- }
-
- .footer-grid {
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
- gap: 32px;
- }
-}
-
-/* Tablet / kleiner */
-@media (max-width: 1024px) {
- footer {
- padding-left: 48px;
- padding-right: 48px;
- }
-
- .footer-grid {
- grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
- gap: 24px;
- }
-}
-
-/* Mobile */
-@media (max-width: 768px) {
- footer {
- padding: 80px 20px;
- }
-
- .footer-grid {
- grid-template-columns: 1fr;
- gap: 32px;
- text-align: left;
- }
-
- #footer-logo {
- width: 200px; /* Logo kleiner auf Mobile */
- }
-}
-
-/* =====================
-FOOTER LOGO SPACING
-===================== */
-
-#footer-logo {
- margin-bottom: 40px; /* Mindestabstand zu den Footer-Links */
-}
-
-/* Auf kleineren Viewports ggf. Abstand vergrößern */
-@media (max-width: 1024px) {
- #footer-logo {
- margin-bottom: 48px;
- }
-}
-
-@media (max-width: 768px) {
- #footer-logo {
- margin-bottom: 56px;
- }
-}
-
-
-/* =====================
-RESPONSIVE: 881px & BELOW
-===================== */
+/* ---------- 881px ---------- */
@media (max-width: 881px) {
- /* ===== SECTIONS PADDING ===== */
- section,
- footer {
+ section, footer {
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
- /* ===== HERO ===== */
.hero {
height: 80vh;
padding: 5vw;
@@ -1412,9 +931,8 @@ RESPONSIVE: 881px & BELOW
font-size: clamp(12px, 3vw, 16px);
}
- /* ===== SERVICES GRID ===== */
.services-grid {
- grid-template-columns: 1fr; /* single column */
+ grid-template-columns: 1fr;
gap: 32px;
}
@@ -1422,9 +940,8 @@ RESPONSIVE: 881px & BELOW
min-height: auto;
}
- /* ===== NEWS SLIDES ===== */
.news-slide {
- grid-template-columns: 1fr; /* single column */
+ grid-template-columns: 1fr;
height: auto;
}
@@ -1434,16 +951,16 @@ RESPONSIVE: 881px & BELOW
}
.news-content {
- padding: 16px 0;
+ justify-content: flex-start;
+ align-items: flex-start;
}
- /* ===== COMPANY ===== */
.company {
padding: 80px 20px;
}
.company-text {
- grid-template-columns: 1fr; /* stack text */
+ grid-template-columns: 1fr;
gap: 32px;
}
@@ -1451,19 +968,6 @@ RESPONSIVE: 881px & BELOW
height: 220px;
}
- /* ===== CLIENTS ===== */
- .logo-track {
- padding: 0 20px;
- gap: 40px;
- overflow-x: auto;
- }
-
- .logo-track img {
- width: 160px;
- flex-shrink: 0;
- }
-
- /* ===== CONTACT ===== */
.content-box {
width: 100%;
}
@@ -1471,9 +975,9 @@ RESPONSIVE: 881px & BELOW
.contact-options {
flex-direction: column;
gap: 12px;
+ text-align: left;
}
- /* ===== FOOTER ===== */
footer {
padding: 60px 20px;
}
@@ -1488,33 +992,231 @@ RESPONSIVE: 881px & BELOW
width: 200px;
margin-bottom: 56px;
}
+
+}
+
+/* ---------- 768px ---------- */
+@media (max-width: 768px) {
+
+ body {
+ padding-top: 80px;
+ }
+
+ section:not(.hero), footer {
+ padding-left: 20px;
+ padding-right: 20px;
+ padding-top: 80px;
+ padding-bottom: 80px;
+ }
+
+ header {
+ height: 80px;
+ }
+
+ .nav {
+ padding: 0 20px;
+ }
+
+ .logo img {
+ height: 36px;
+ }
+
+ .hero {
+ height: 100vh;
+ padding: 40px 20px;
+ }
+
+ .hero-overlay {
+ transform: scale(1.05);
+ }
+
+ .hero-title {
+ font-size: 48px;
+ }
+
+ .hero-subline {
+ font-size: 14px;
+ }
+
+ .news-slide {
+ grid-template-columns: 1fr;
+ height: auto;
+ }
+
+ .news-media {
+ height: 260px;
+ clip-path: none;
+ }
+
+ .company {
+ padding: 120px 20px;
+ }
+
+ .company img {
+ height: 220px;
+ }
+
+ .logo-track {
+ padding: 0 20px;
+ gap: 40px;
+ overflow-x: auto;
+ }
+
+ .logo-track img {
+ width: 160px;
+ flex-shrink: 0;
+ }
+
+ .content-box {
+ width: 100%;
+ }
+
+ .contact-options {
+ flex-direction: row;
+ gap: 12px;
+ text-align: left;
+ }
+
+ footer {
+ padding: 80px 20px;
+ }
+
+ .footer-grid {
+ grid-template-columns: 1fr;
+ gap: 32px;
+ text-align: left;
+ }
+
+ #footer-logo {
+ width: 200px;
+ margin-bottom: 56px;
+ }
+
}
/* =====================
-TINY MOBILE FIX: 320px & below
+HERO FLUID: 411px – 768px
===================== */
+@media (min-width: 411px) and (max-width: 768px) {
+ .hero::before {
+ right: -750px; /* war: -600px */
+ width: calc(300px + ((100vw - 411px) / (768 - 411)) * (750 - 300));
+ height: calc(400px + ((100vw - 411px) / (768 - 411)) * (1050 - 400));
+ }
+ .hero::after {
+ left: -500px;
+ width: calc(250px + ((100vw - 411px) / (768 - 411)) * (600 - 250));
+ height: calc(350px + ((100vw - 411px) / (768 - 411)) * (1000 - 350));
+ }
+}
+
+/* =====================
+TINY MOBILE: 410px & below
+===================== */
+
+@media (max-width: 410px) {
+
+ .hero::before,
+ .hero::after {
+ display: none !important;
+ }
+
+ .hero {
+ height: auto;
+ padding: 20px 16px;
+ }
+
+ .hero-title {
+ font-size: 36px !important;
+ line-height: 1.2;
+ }
+
+ .hero-subline {
+ font-size: 16px !important;
+ line-height: 1.4;
+ word-break: break-word;
+ }
+
+ .news-slide {
+ grid-template-columns: 1fr !important;
+ height: auto !important;
+ }
+
+ .news-media {
+ height: 220px !important;
+ clip-path: none !important;
+ }
+
+ .news-title {
+ font-size: 20px !important;
+ margin-bottom: 8px !important;
+ }
+
+ .news-subline {
+ font-size: 16px !important;
+ margin-bottom: 8px !important;
+ }
+
+ .news-text {
+ font-size: 14px !important;
+ line-height: 1.4 !important;
+ margin-bottom: 12px !important;
+ }
+
+ .company {
+ padding: 60px 16px !important;
+ }
+
+ .company-text {
+ grid-template-columns: 1fr !important;
+ gap: 16px !important;
+ }
+
+ .company img {
+ height: auto !important;
+ }
+
+ .content-box {
+ padding: 24px 16px !important;
+ }
+
+ section, footer,
+ .news-container,
+ .company-content,
+ .logo-track {
+ max-width: 100% !important;
+ padding-left: 16px !important;
+ padding-right: 16px !important;
+ box-sizing: border-box;
+ }
+
+}
+
+/* =====================
+TINY MOBILE: 320px & below
+===================== */
+
@media (max-width: 320px) {
- /* Sections & footer */
- section:not(.hero),
- footer {
+ section:not(.hero), footer {
padding-left: 16px !important;
padding-right: 16px !important;
}
- /* Hero */
.hero {
- height: 70vh !important;
- padding: 4vw !important;
+ height: auto !important;
+ padding: 20px 16px !important;
}
.hero-title {
- font-size: clamp(24px, 6vw, 36px) !important;
+ font-size: 32px !important;
+ line-height: 1.2 !important;
}
.hero-subline {
- font-size: clamp(10px, 3vw, 14px) !important;
- line-height: 1.5 !important;
+ font-size: 14px !important;
+ line-height: 1.4 !important;
+ word-break: break-word !important;
}
.hero-overlay {
@@ -1522,7 +1224,6 @@ TINY MOBILE FIX: 320px & below
padding: 8px !important;
}
- /* Services grid */
.services-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
@@ -1534,58 +1235,87 @@ TINY MOBILE FIX: 320px & below
min-height: auto !important;
}
- /* News slides */
.news-slide {
- grid-template-columns: 1fr !important;
+ display: flex !important;
+ flex-direction: column !important;
+ border-left: 1px solid #7FD332 !important;
+ border-right: 1px solid #7FD332 !important;
+ padding: 8px 16px !important;
height: auto !important;
}
- .news-media {
- clip-path: none !important;
- height: 200px !important;
+ .news-title {
+ font-size: 18px !important;
+ margin-bottom: 8px !important;
}
- .news-content {
- padding: 12px 0 !important;
+ .news-subline {
+ font-size: 14px !important;
+ margin-bottom: 8px !important;
+ }
+
+ .news-text {
+ font-size: 12px !important;
+ margin-bottom: 8px !important;
+ }
+
+ .news-button {
+ padding: 8px 12px !important;
+ font-size: 12px !important;
}
- /* Company section */
.company {
padding: 60px 16px !important;
}
+ .company-content {
+ padding: 0 16px !important;
+ }
+
.company-text {
grid-template-columns: 1fr !important;
- gap: 24px !important;
- }
-
- .company img {
- height: auto !important;
- }
-
- /* Clients / logo track */
- .logo-track {
- padding: 0 8px !important;
gap: 16px !important;
- overflow-x: auto !important;
+ }
+
+ #clients {
+ padding: 0 16px !important;
+ }
+
+ .logo-track {
+ flex-wrap: wrap !important;
+ justify-content: center !important;
+ padding: 0 !important;
+ gap: 16px !important;
}
.logo-track img {
- width: 120px !important;
- flex-shrink: 0 !important;
+ width: 45% !important;
+ margin-bottom: 16px !important;
+ max-height: 50px !important;
}
- /* Contact */
.content-box {
- width: 100% !important;
+ padding: 8px 16px !important;
+ max-width: 100% !important;
}
.contact-options {
flex-direction: column !important;
+ align-items: flex-start !important;
gap: 8px !important;
}
- /* Footer */
+ .contact-link {
+ font-size: 14px !important;
+ }
+
+ .contact-button {
+ font-size: 12px !important;
+ padding: 8px 16px !important;
+ width: 100% !important;
+ text-align: center !important;
+ }
+
footer {
padding: 40px 16px !important;
}
@@ -1600,7 +1330,6 @@ TINY MOBILE FIX: 320px & below
margin-bottom: 40px !important;
}
- /* Header/nav */
header {
height: 70px !important;
}
@@ -1612,4 +1341,5 @@ TINY MOBILE FIX: 320px & below
.logo img {
height: 30px !important;
}
+
}
\ No newline at end of file
diff --git a/data/content.json b/data/content.json
deleted file mode 100644
index 8445968..0000000
--- a/data/content.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
- "news": [
- {
- "title": {
- "de": "Neue Röstung",
- "en": "New Roast"
- },
- "text": {
- "de": "Unsere neue Kaffeemischung ist da.",
- "en": "Our new coffee blend has arrived."
- },
- "image": "/assets/IMG_News1.png"
- }
- ]
-}
\ No newline at end of file
diff --git a/index.html b/index.html
index 6bf0947..c5b1058 100644
--- a/index.html
+++ b/index.html
@@ -18,17 +18,16 @@
- News
-
- Unternehmen
-
- Kontakt
- Karriere
+ News
+ Leistungen
+ Unternehmen
+ Kontakt
+ Karriere
-
- 
- 
- 