body {background-color: #000;} @font-face { font-family: postercompressed; src: url(Assets/Font/PosterCompressed-Regular.ttf); } /* Grundlegende Einstellungen */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Navigation Styles */ header { width: 100%; position: fixed; /* Fixiert die Navigation oben */ top: 0; padding: 10px 20px; z-index: 1000; justify-content: space-between; overflow-x: hidden; } nav { margin-right: 5vw; margin-top: 20px; display: flex; justify-content: flex-end; /* Richtet die .nav-right Elemente nach rechts aus */ align-items: center; /* Vertikal zentrieren */ position: relative; } .nav-center { Pointer-events:none; position: absolute; left: 52%; transform: translateX(-50%); /* Exakte Zentrierung des Logos */ } .nav-right { Pointer-events:auto; display: flex; align-items: center; /* Social Media und Burger-Menü vertikal zentrieren */ margin-left: auto; /* Sorgt dafür, dass der rechte Bereich wirklich rechts bleibt */ } .logo { Pointer-events:auto; width: 100px; /* Größe des Logos anpassen */ height: auto; } /* Einheitliche Größe der Social Media Icons */ .instagram { width: 30px; height: 30px; /* Feste Höhe und Breite für Social Media Icons */ margin-left: 30px; margin-top: 5px; } .linkedin { width: 30px; height: 40px; /* Feste Höhe und Breite für Social Media Icons */ margin-left: 30px; } .behance { width: 40px; height: 70px; /* Feste Höhe und Breite für Social Media Icons */ margin-left: 30px; margin-top: 5px; } @media (max-width: 900px) { .instagram, .linkedin, .behance { /* Klasse für deine Social Media Icons */ display: none; } .logo{ top: 100px; } header { width: 100%; position: fixed; /* Fixiert die Navigation oben */ top: 0; margin-right: 10px; padding: 35px 10px; } } .burger-icon { width: 40px; /* Größe des Burger-Menüs */ height: 30px; margin-left: 30px; cursor: pointer; } .section { position: relative; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .hero-video{ position: relative; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .background-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .content h1 { color: #fff; font-family: postercompressed; font-size: 35vw; text-transform: uppercase; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: black; } ---------------------- .section { position: relative; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; background: #ffcc00; /* Beispiel Hintergrund */ transition: background 0.5s ease; } .side-text { position: absolute; left: 2%; top: 50%; transform: translateY(-50%); writing-mode: vertical-lr; /* Vertikale Ausrichtung der Schrift */ text-align: center; z-index: 2; } .side-text h2 { font-family: "Outfit", sans-serif; font-size: 12px; letter-spacing: 2px; letter-spacing: 0.4em; word-spacing: 0.5em; text-transform: uppercase; color: white; transition: color 0.5s ease; transform: rotate(180deg); } .content { z-index: 1; position: relative; } .section::before { content: ""; position: absolute; top: 0; left: -100%; width: 5%; height: 100%; background: white; transition: left 0.2s ease; z-index: 0; } .section:hover::before { left: 0; } .section:hover .side-text h2 { color: black; } -------------------------------------- .contact-section { display: flex; flex-direction: column; align-items: center; /* Zentriert den gesamten Inhalt horizontal */ text-align: center; padding: 100px 0; color: white; max-width: 800px; margin: 0 auto; } .contact-section h3 { color: white; font-family: "proxima-nova", sans-serif; font-weight: 700; font-style: normal; text-align: center; font-size: 3rem; margin-bottom: 10px; } .contact-section p { color: #fff; font-family: "proxima-nova", sans-serif; font-weight: 400; font-style: normal; font-size: 1rem; text-align: center; line-height: 1.6; margin-bottom: 40px; max-width: 900px; margin-left: auto; margin-right: auto; } .contact-btn { display: inline-block; /* Damit der Button als Blockelement behandelt wird */ text-decoration: none; font-size: 1rem; margin: 0 auto; /* Zentriert den Button */ font-family: "Outfit", sans-serif; letter-spacing: 2px; letter-spacing: 0.4em; word-spacing: 0.5em; text-decoration: none; font-size: 1rem; color: white; border-bottom: 2px solid white; padding-bottom: 5px; } .abstand { margin-top: 300px; margin-bottom: 300px; } .btn-abstand { display: flex; justify-content: center; /* Zentriert den Button in der div */ margin-top: 20px; } ---------------------------------- footer { padding: 20px; justify-content: space-between; align-items: center; position: absolute; } .footer-logo { width: 200px; /* Logo-Größe anpassen */ } .footer-content { width: 85%; margin: 0 auto; font-family: "proxima-nova", sans-serif; font-weight: 600; display: flex; justify-content: space-between; align-items: end; padding: 70px 0px; color: #fff; } .copyright { margin-bottom: 15px; } .footer-left { display: flex; align-items: end; gap: 10px; } .footer-right a { margin-left: 20px; color: #fff; text-decoration: none; } .footer-top { text-align: right; margin-bottom: 100px; } .button-up { width: 50px; height: 50px; transition: transform 0.3s ease; text-align: right; } .abstaende-links{ margin-bottom: 15px; } /* Overlay Styling */ .overlay { pointer-events: auto; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 1); display: none; /* Versteckt das Overlay initial */ flex-direction: column; align-items: center; justify-content: center; z-index: 999; opacity: 0; } .overlay.logo2{ width: 100px; /* Größe des Logos anpassen */ height: auto; margin-top: 100px; } .overlay.open { display: flex; opacity: 1; } .overlay ul { list-style: none; text-align: center; opacity: 0; animation: slideIn 0.5s ease forwards 0.0s; } .overlay ul li:nth-child(1) { animation-delay: 0.1s; } .overlay ul li:nth-child(2) { animation-delay: 0.2s; } .overlay ul li:nth-child(3) { animation-delay: 0.3s; } .overlay ul li:nth-child(4) { animation-delay: 0.4s; } .overlay ul li { margin: 10px 0; } .overlay ul li a { pointer-events: auto; font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 4.5rem; /* H0-Größe */ color: white; text-transform: uppercase; text-decoration: none; } .footer a { pointer-events: auto; font-family: "proxima-nova", sans-serif; font-weight: 700; margin-top: 50px; margin-bottom: 50px; color: white; font-size: 1rem; text-align: center; margin: 10px; } .close-btn { position: absolute; top: 30px; right: 6vw; font-size: 4rem; color: white; background: none; border: none; cursor: pointer; display: none; } .overlay.open .close-btn { pointer-events: auto; display: block; } .social-media-burger{ margin-top: 5%; align-items: end; /* Social Media und Burger-Menü vertikal zentrieren */ } .Instagram2{ width: 30px; margin: 20px; } .LinkedIn2{ width: 30px; margin: 20px; } .Behance2{ width: 40px; margin: 20px; } /* Slide-in Animation */ @keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); opacity: 1; } } .Hero-img { height: 100vh; width: 100%; position: relative; /* Setzt den Bezugspunkt für absolute Positionierungen */ display: flex; justify-content: center; align-items: center; overflow: hidden; /* Verhindert Überlauf */ text-align: center; } .header-img { width: 100%; /* Bild nimmt gesamte Breite ein */ height: 100vh; /* Bildhöhe passt sich der Bildschirmhöhe an */ object-fit: cover; /* Bild skaliert, um den Bereich zu füllen */ position: absolute; /* Bild bleibt hinter dem Text */ top: 0; left: 0; z-index: -1; /* Bild wird hinter dem Text platziert */ } .hero-content { z-index: 1; /* Text liegt über dem Bild */ color: #fff; } .hero-content h1 { font-family: postercompressed; font-size: 30vw; /* Kleinere Schriftgröße für bessere Anpassung */ text-transform: uppercase; font-weight: 400; margin: 0; } .detail-section { position: relative; height: 100vh; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center; color: white; } .detai-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 128, 0, 0.6); /* Grüner Überlagerungseffekt */ z-index: 1; } .detail-logo { width: 400px; /* Feste Breite für das Logo */ margin-bottom: 30px; margin-left: 5%; margin-right: 5% } .description { font-family: "Outfit", sans-serif; font-size: 18px; line-height: 1.6; max-width: 1200px; margin: 0 auto 20px; margin-bottom: 30px; margin-left: 5%; margin-right: 5% } .detail-section2 { display: flex; justify-content: center; margin: 20px auto; /* Abstand zu anderen Elementen */ } .header-img2 { width: 90%; max-width: 1920px; /* Maximale Breite für größere Bildschirme */ height: auto; margin: 20px; } .row { display: flex; flex-wrap: wrap; padding: 0 4px; margin-left: 5%; margin-right: 5%; margin-top: 2%; } /* Create four equal columns that sits next to each other */ .column { flex: 30%; max-width: 40%; padding: 0 10px; } .column img { margin-top: 20px; vertical-align: middle; width: 100%; } /* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 800px) { .column { flex: 100%; max-width: 100%; } } .row2 { display: flex; flex-wrap: wrap; padding: 0 4px; margin-left: 10%; margin-right: 10%; margin-top: 2%; } /* Create four equal columns that sits next to each other */ .column2 { flex: 25%; max-width: 25%; padding: 0 10px; } .column2 img { margin-top: 20px; vertical-align: middle; width: 100%; } /* Responsive layout - makes a two column-layout instead of four columns */ @media screen and (max-width: 800px) { .column2 { flex: 50%; max-width: 50%; } } .hello-section { display: flex; align-items: center; justify-content: center; padding: 20px; margin: 0 100px; } .hello-svg { margin-top:100px; margin-bottom:100px; flex: 1; max-width: 70%; } .responsive-svg { width: 100%; height: auto; } .text-content { font-family: "proxima-nova", sans-serif; flex: 1; max-width: 40%; padding-left: 40px; padding-right: 5%; } .text-content h2 { line-height: 90%; font-size: 3rem; font-weight: bold; margin-bottom: 20px; color: #ffffff; } .text-content p { font-family: "Outfit", sans-serif; font-size: 1rem; line-height: 1.5; color: #ffffff; margin-bottom: 5%; } /* Breakpoint bei 600px */ @media (max-width: 1000px) { .hello-section { flex-direction: column; margin: 0 20px; /* Reduziert den Rand für kleinere Bildschirme */ } .hello-svg { order: 1; max-width: 80%; /* Beide Bereiche nehmen die volle Breite ein */ padding: 0; /* Entfernt das linke Padding des Texts */ text-align: center; /* Zentriert den Text für eine bessere Lesbarkeit */ } .text-content { order: 2; max-width: 100%; /* Beide Bereiche nehmen die volle Breite ein */ padding: 0; /* Entfernt das linke Padding des Texts */ text-align: center; /* Zentriert den Text für eine bessere Lesbarkeit */ } .contact-section p { color: #fff; font-family: "proxima-nova", sans-serif; font-weight: 400; font-style: normal; font-size: 1rem; text-align: center; line-height: 1.6; margin-bottom: 40px; max-width: 900px; margin-left: 5%; margin-right: 5%; } } .impressum-container{ color: #ffffff; font-family: "proxima-nova", sans-serif; margin: 10% 20%; } .section-title { font-family: "proxima-nova", sans-serif; font-weight: 700; font-size: 2vh; margin-bottom: 10px; margin-top: 10px; } @media only screen and (max-width: 768px) { .section { display: flex; /* Flexbox bleibt aktiviert */ justify-content: center; /* Zentriert Inhalte horizontal */ align-items: center; /* Zentriert Inhalte vertikal */ position: relative; /* Wichtig für den Kontext von .side-text */ } .section:hover::before, .section:hover .side-text h2 { color: inherit; /* Entfernt Hover-Farbe */ background: none; } .section:hover { background: inherit; /* Entfernt Hintergrund-Hover-Effekt */ } .section:hover::before { display: none; /* Verhindert Animation in der mobilen Ansicht */ } .side-text { position: absolute; /* Absolute Positionierung relativ zur Section */ top: 85%; /* Vertikale Mitte */ left: 50%; /* Horizontale Mitte */ transform: translate(-50%, -50%); /* Korrektur der Zentrierung */ writing-mode: horizontal-tb; /* Standard-Textausrichtung */ text-align: center; /* Text zentrieren */ white-space: nowrap; /* Verhindert Zeilenumbrüche */ width: auto; /* Passt sich dem Inhalt an */ } .side-text h2 { transform: none; color: white; /* Stellt die Farbe wieder her */ } .section::before { display: none; } .footer-right { text-align: right; } .hero-content h1 { font-size: 40vw; } .overlay ul li a { font-size: 13vw; } .detail-logo { width: 60%; /* Feste Breite für das Logo */ } .impressum-container { margin: 30% 10%; } .footer-right a { margin-left: 5% } .nav-center { left: 54%; } .description { font-size: 4vw; line-height: normal; } }