:root {
--bg-primary: #0A0A0A;
--bg-surface: #111111;
--text-primary: #E8E4DC;
--text-secondary: #8A8580;
--primary-color: #7A3E3E;
--accent-color: #C9A87C;
--accent-hover: #D4BC9A;
--border-color: rgba(201, 168, 124, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--bg-primary);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
font-weight: 700;
line-height: 1.1;
color: var(--text-primary);
}
h1 { font-size: clamp(3rem, 7vw, 7rem); }
h2 { font-size: clamp(2rem, 4vw, 4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); font-family: 'Inter', sans-serif; font-weight: 600; }
a {
color: var(--accent-color);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--accent-hover);
}
section {
padding: 8rem 2rem;
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* --- NAVIGATION --- */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 3rem;
z-index: 1000;
transition: all 0.4s ease;
}
nav.scrolled {
background-color: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
}
.nav-logo {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
text-decoration: none;
}
.nav-links {
display: flex;
gap: 2.5rem;
}
.nav-links a {
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 1px;
background-color: var(--accent-color);
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.nav-links a:hover {
color: var(--text-primary);
}
.hamburger {
display: none;
cursor: pointer;
background: none;
border: none;
color: var(--text-primary);
font-size: 1.5rem;
}
/* --- HERO SECTION --- */
.hero {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 0;
max-width: 100%;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
background-image: url('assets/projekt-01.jpg');
background-size: cover;
background-position: center;
z-index: 0;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(10,10,10,0.3), rgba(10,10,10,0.9));
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 900px;
padding: 0 2rem;
}
.hero-content h1 {
margin-bottom: 1.5rem;
color: var(--text-primary);
}
.hero-content .subtitle {
font-size: 1.25rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 2.5rem auto;
line-height: 1.7;
}
.btn {
display: inline-block;
padding: 1rem 2.5rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.15em;
cursor: pointer;
transition: all 0.4s ease;
}
.btn-primary {
background-color: transparent;
color: var(--accent-color);
border: 1px solid var(--accent-color);
}
.btn-primary:hover {
background-color: var(--accent-color);
color: var(--bg-primary);
}
.scroll-reveal {
opacity: 0;
transform: translateY(40px);
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* --- ABOUT SECTION --- */
.about {
display: flex;
flex-direction: row;
gap: 4rem;
align-items: center;
text-align: left;
}
.about-image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.about-image img {
max-width: 100%;
height: auto;
border-radius: 0;
filter: grayscale(30%);
transition: filter 0.4s ease;
}
.about-image img:hover {
filter: grayscale(0%);
}
.about-text {
flex: 1.5;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.about-text h2 {
margin-bottom: 1rem;
}
.about-text .subtitle {
color: var(--primary-color);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.9rem;
}
.about-text p {
color: var(--text-secondary);
line-height: 1.7;
}
.stats {
display: flex;
gap: 2rem;
margin-top: 2rem;
}
.stat-item {
display: flex;
flex-direction: column;
}
.stat-item .number {
font-family: 'Playfair Display', serif;
font-size: 3rem;
color: var(--accent-color);
line-height: 1;
}
.stat-item .label {
font-size: 0.875rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 0.5rem;
}
/* --- SERVICES SECTION --- */
.services h2 {
text-align: center;
margin-bottom: 4rem;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
width: 100%;
}
.service-card {
background-color: var(--bg-surface);
overflow: hidden;
border: none;
border-radius: 0;
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.service-card-image {
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
}
.service-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.service-card:hover .service-card-image img {
transform: scale(1.05);
}
.service-card:hover .service-card-image::after {
opacity: 1;
}
.service-card-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 10, 0.6);
opacity: 0;
transition: opacity 0.4s ease;
}
.service-card-content {
padding: 2rem;
}
.service-card-content h3 {
margin-bottom: 0.75rem;
color: var(--text-primary);
}
.service-card-content p {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* --- PROJECTS SECTION --- */
.projects h2 {
text-align: center;
margin-bottom: 4rem;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry; /* Fallback to grid if masonry not supported */
gap: 1.5rem;
width: 100%;
}
.project-item {
position: relative;
overflow: hidden;
cursor: pointer;
background-color: var(--bg-surface);
aspect-ratio: 4/3;
}
.project-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.project-item:hover img {
transform: scale(1.05);
}
.project-item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 10, 0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.4s ease;
}
.project-item:hover .overlay {
opacity: 1;
}
.project-item .overlay h3 {
color: var(--text-primary);
font-family: 'Inter', sans-serif;
font-weight: 600;
}
.project-item .overlay .view-btn {
margin-top: 1rem;
font-size: 0.8rem;
border-bottom: 1px solid var(--accent-color);
padding-bottom: 2px;
}
/* --- WHY US SECTION --- */
.why-us {
text-align: center;
}
.why-us h2 {
margin-bottom: 4rem;
}
.why-us-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
width: 100%;
}
.why-us-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.why-us-item .icon {
font-family: 'Playfair Display', serif;
font-size: 4rem;
color: var(--accent-color);
line-height: 1;
}
.why-us-item h3 {
margin-bottom: 0.5rem;
}
.why-us-item p {
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.6;
max-width: 300px;
}
/* --- TESTIMONIALS SECTION --- */
.testimonials {
background-color: var(--bg-surface);
max-width: 100%;
padding: 8rem 2rem;
}
.testimonials-inner {
max-width: 1280px;
margin: 0 auto;
text-align: center;
}
.testimonials h2 {
margin-bottom: 4rem;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
text-align: left;
}
.testimonial-card {
background-color: var(--bg-primary);
padding: 2.5rem;
border-radius: 0;
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 280px;
}
.testimonial-card .stars {
color: var(--accent-color);
font-size: 1.2rem;
margin-bottom: 1.5rem;
}
.testimonial-card p {
font-style: italic;
color: var(--text-primary);
line-height: 1.7;
margin-bottom: 2rem;
}
.testimonial-card .author {
font-weight: 600;
color: var(--text-secondary);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* --- CONTACT SECTION --- */
.contact {
display: flex;
flex-direction: row;
gap: 4rem;
align-items: flex-start;
text-align: left;
}
.contact-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-info h2 {
margin-bottom: 1rem;
}
.contact-info .subtitle {
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 1rem;
}
.contact-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.contact-item .label {
font-weight: 600;
color: var(--accent-color);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.8rem;
}
.contact-item .value {
font-size: 1.1rem;
color: var(--text-primary);
}
.contact-form {
flex: 1.2;
background-color: var(--bg-surface);
padding: 3rem;
width: 100%;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-secondary);
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 1rem;
background-color: var(--bg-primary);
border: 1px solid var(--border-color);
color: var(--text-primary);
font-family: 'Inter', sans-serif;
transition: border-color 0.3s ease;
outline: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--accent-color);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* --- FOOTER --- */
footer {
background-color: var(--bg-surface);
padding: 4rem 2rem 2rem 2rem;
border-top: 1px solid var(--border-color);
}
.footer-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.footer-brand {
flex: 1;
min-width: 250px;
}
.footer-brand h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text-primary);
}
.footer-brand p {
color: var(--text-secondary);
font-size: 0.9rem;
line-height: 1.6;
}
.footer-links {
display: flex;
gap: 3rem;
flex-wrap: wrap;
}
.footer-column {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-column strong {
color: var(--text-primary);
margin-bottom: 0.5rem;
font-weight: 600;
}
.footer-column a {
color: var(--text-secondary);
font-size: 0.9rem;
}
.footer-column a:hover {
color: var(--accent-color);
}
.footer-bottom {
max-width: 1280px;
margin: 0 auto;
border-top: 1px solid var(--border-color);
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p {
color: var(--text-secondary);
font-size: 0.8rem;
}
/* --- LIGHTBOX --- */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 10, 0.95);
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
opacity: 0;
transition: opacity 0.4s ease;
}
.lightbox.is-open {
display: flex;
opacity: 1;
}
.lightbox img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
}
.lightbox-close {
position: absolute;
top: 2rem;
right: 2rem;
font-size: 2rem;
color: var(--accent-color);
cursor: pointer;
background: none;
border: none;
transition: color 0.3s ease;
}
.lightbox-close:hover {
color: var(--accent-hover);
}
/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
.projects-grid {
grid-template-columns: repeat(2, 1fr);
}
.about, .contact {
flex-direction: column;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 60px;
left: 0;
width: 100%;
background-color: var(--bg-primary);
padding: 2rem 3rem;
gap: 1.5rem;
border-bottom: 1px solid var(--border-color);
}
.nav-links.is-active {
display: flex;
}
.hamburger {
display: block;
}
.projects-grid {
grid-template-columns: 1fr;
}
.stats {
flex-direction: column;
gap: 2rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.footer-inner {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-links {
justify-content: center;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
/* Elementor compatibility fixes */
.elementor-section-wrap { max-width: 100%; }
Sydney Sanierung
Wo Präzision auf Ästhetik trifft. Wir verwandeln Räume in Erlebnisse.
Projekt starten
Über uns
Ihre Experten für Sanierung und Raumgestaltung
Sydney-Sanierung hat zahlreiche Kunden mit hochwertigen Sanierungsarbeiten überzeugt. Gemeinsam gestalten wir Wohlfühlorte, die Ihre Persönlichkeit widerspiegeln und im Alltag Freude bereiten. Als Ihr engagierter Partner für erstklassige Renovierungen und inspirierende Wandgestaltung realisieren wir Ihre anspruchsvollen Projekte – vom privaten Wohntraum bis zum repräsentativen Geschäftsgebäude.
Mit über 10 Jahren Erfahrung in der Sanierungsbranche gewährleisten wir höchste Standards und Effizienz. Unser Team besteht aus mehr als 15 erfahrenen Fachkräften, die sich leidenschaftlich für Ihr Projekt einsetzen.
10+
Jahre Erfahrung
500+
Projekte
15
Spezialisten
Unsere Leistungen
Innenausbau
Massgeschneiderter Innenausbau für Privat- und Gewerberäume. Von der Planung bis zur fertigen Realisierung setzen wir Ihre Vorstellungen um.
Trockenbau
Professionelle Trockenbau-Lösungen für Wände, Decken und Zwischenwände. Schnell, sauber und mit höchster Präzision ausgeführt.
Bodenverlegung
Verlegung hochwertiger Böden aller Art – Parkett, Laminat, Vinyl und Fliesen. Für ein erstklassiges Fundament in jedem Raum.
Kreative Wandgestaltung
Wände, die begeistern: Spachteltechniken, Tapeten, Farbgestaltung und dekorative Oberflächen für einzigartige Akzente.
Renovierung & Sanierung
Komplettsanierung von A–Z: Altbausanierung, Modernisierung und Wiederaufbau mit Fokus auf Qualität und Langlebigkeit.
Putz & Spachtel
Fachgerechte Putzarbeiten und Spachtelungen für perfekt glatte Oberflächen und eine solide Basis für jede weitere Gestaltung.
Ausgewählte Projekte
Warum Sydney Sanierung?
01
Qualität ohne Kompromisse
Wir verwenden ausschliesslich hochwertige Materialien und arbeiten nach neuesten Standards für ein langlebiges Ergebnis.
02
Termintreue
Ihr Zeitplan ist unsere Priorität. Wir liefern pünktlich ab, ohne dabei an Qualität einzubüssen.
03
Kreative Lösungen
Jeder Raum ist einzigartig. Wir entwickeln massgeschneiderte Konzepte, die perfekt zu Ihren Bedürfnissen passen.
04
Transparenz
Klare Kommunikation und transparente Preise von Anfang an – keine versteckten Kosten, keine Überraschungen.
Das sagen unsere Kunden
★★★★★
«Sydney Sanierung hat unseren Altbau von Grund auf renoviert. Das Ergebnis übertrifft alle Erwartungen – makellos und mit Liebe zum Detail.»
★★★★★
«Schnell, zuverlässig und äusserst professionell. Unser Büro wurde in Rekordzeit umgebaut – ohne jegliche Beeinträchtigung des Tagesgeschäfts.»
★★★★★
«Von der ersten Beratung bis zur finalen Abnahme lief alles reibungslos. Die kreative Wandgestaltung ist ein echter Hingucker!»
Kontaktieren Sie uns
Lassen Sie uns Ihr Projekt besprechen
Ob Renovierung, Neubau oder kreative Raumgestaltung – wir freuen uns darauf, Ihre Vision Wirklichkeit werden zu lassen.
Adresse
Altenbrückstraße, Düsseldorf
Telefon
0152 34346248
E-Mail
info@sydney-sanierung.de
Öffnungszeiten
Mo–Fr: 08:00–18:00 Uhr