cgasser
7a66ba3244
- Nav: white background, logo image (MarszalekLogoGrau.jpg) replaces text - Projekte: removed filter bar (Alle/Wohnen/etc.), plain grid - Lightbox: click any project to open modal with full image gallery, thumbnail strip, description, keyboard/touch navigation - Before/after drag slider for 5 renovation projects: Sanierung, Landhaus, Winzerhaus Neusiedlersee, Dachausbau, Winzerhaus 14. Jhdt. - Downloaded 108 extra gallery images locally (no CDN dependency) - Über uns: removed Herbert Marszalek, Florian more prominent - CLAUDE.md updated to reflect all changes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1417 lines
50 KiB
HTML
1417 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Marszalek Architekten Perchtoldsdorf – Ihr Architekt für Neubau und Umbau in Wien und Niederösterreich.">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
|
||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
|
||
<title>Marszalek Architekten · Perchtoldsdorf</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
/* ── Reset ── */
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
|
||
/* ── Tokens ── */
|
||
:root {
|
||
--black: #0f0f0f;
|
||
--white: #ffffff;
|
||
--off-white: #f6f5f3;
|
||
--grey-light: #ebebeb;
|
||
--grey-mid: #999;
|
||
--grey-dark: #444;
|
||
--nav-h: 76px;
|
||
--serif: 'Cormorant Garamond', Georgia, serif;
|
||
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
--pad: 64px;
|
||
}
|
||
|
||
/* ── Base ── */
|
||
body {
|
||
font-family: var(--sans);
|
||
font-weight: 300;
|
||
color: var(--black);
|
||
background: var(--white);
|
||
line-height: 1.65;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
img { display: block; max-width: 100%; }
|
||
a { color: inherit; }
|
||
|
||
/* ── Navigation ── */
|
||
nav {
|
||
position: fixed;
|
||
inset: 0 0 auto;
|
||
height: var(--nav-h);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 var(--pad);
|
||
z-index: 200;
|
||
background: #ffffff;
|
||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||
transition: background 0.35s;
|
||
}
|
||
|
||
.nav-logo {
|
||
text-decoration: none;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.nav-logo img {
|
||
height: 34px;
|
||
width: auto;
|
||
display: block;
|
||
}
|
||
|
||
.nav-links {
|
||
list-style: none;
|
||
display: flex;
|
||
gap: 44px;
|
||
}
|
||
.nav-links a {
|
||
text-decoration: none;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
position: relative;
|
||
padding-bottom: 3px;
|
||
transition: color 0.2s;
|
||
}
|
||
.nav-links a::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0; bottom: 0;
|
||
width: 0; height: 1px;
|
||
background: var(--black);
|
||
transition: width 0.3s ease;
|
||
}
|
||
.nav-links a:hover::after { width: 100%; }
|
||
|
||
/* hamburger */
|
||
.nav-burger {
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
cursor: pointer;
|
||
border: none;
|
||
background: none;
|
||
padding: 4px;
|
||
}
|
||
.nav-burger span {
|
||
display: block;
|
||
width: 22px; height: 1px;
|
||
background: var(--black);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
/* ── Hero ── */
|
||
.hero {
|
||
position: relative;
|
||
height: 100vh;
|
||
min-height: 580px;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding: 0 var(--pad) 80px;
|
||
overflow: hidden;
|
||
}
|
||
.hero-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: url('images/ArminGarten-scaled.jpg') center/cover no-repeat;
|
||
transform: scale(1.03);
|
||
transition: transform 9s ease-out;
|
||
}
|
||
.hero:hover .hero-bg { transform: scale(1.0); }
|
||
.hero::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
to top,
|
||
rgba(0,0,0,0.72) 0%,
|
||
rgba(0,0,0,0.28) 55%,
|
||
rgba(0,0,0,0.08) 100%
|
||
);
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 680px;
|
||
}
|
||
.hero-eyebrow {
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.28em;
|
||
text-transform: uppercase;
|
||
color: rgba(255,255,255,0.55);
|
||
margin-bottom: 22px;
|
||
}
|
||
.hero-title {
|
||
font-family: var(--serif);
|
||
font-size: clamp(3.2rem, 6.5vw, 6.4rem);
|
||
font-weight: 300;
|
||
color: var(--white);
|
||
line-height: 1.03;
|
||
margin-bottom: 28px;
|
||
}
|
||
.hero-title em { font-style: italic; }
|
||
.hero-desc {
|
||
font-size: 15px;
|
||
color: rgba(255,255,255,0.7);
|
||
max-width: 420px;
|
||
line-height: 1.75;
|
||
margin-bottom: 42px;
|
||
}
|
||
.btn {
|
||
display: inline-block;
|
||
padding: 13px 34px;
|
||
font-size: 10.5px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
transition: all 0.28s ease;
|
||
}
|
||
.btn-light {
|
||
background: var(--white);
|
||
color: var(--black);
|
||
}
|
||
.btn-light:hover {
|
||
background: var(--black);
|
||
color: var(--white);
|
||
}
|
||
.btn-dark {
|
||
background: var(--black);
|
||
color: var(--white);
|
||
}
|
||
.btn-dark:hover {
|
||
background: var(--white);
|
||
color: var(--black);
|
||
}
|
||
|
||
/* ── Section Base ── */
|
||
section {
|
||
padding: 120px var(--pad);
|
||
}
|
||
.section-label {
|
||
display: block;
|
||
font-size: 10px;
|
||
letter-spacing: 0.32em;
|
||
text-transform: uppercase;
|
||
color: var(--grey-mid);
|
||
margin-bottom: 14px;
|
||
}
|
||
.section-title {
|
||
font-family: var(--serif);
|
||
font-size: clamp(2.2rem, 4vw, 3.8rem);
|
||
font-weight: 300;
|
||
line-height: 1.08;
|
||
}
|
||
.section-head { margin-bottom: 72px; }
|
||
|
||
/* ── Portfolio ── */
|
||
#projekte { background: var(--white); padding-top: 140px; }
|
||
|
||
.portfolio-top {
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.portfolio-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 3px;
|
||
}
|
||
|
||
.p-item {
|
||
position: relative;
|
||
aspect-ratio: 4/3;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
background: var(--grey-light);
|
||
}
|
||
.p-item.hidden { display: none; }
|
||
|
||
.p-item img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
transition: transform 0.65s ease;
|
||
}
|
||
.p-item:hover img { transform: scale(1.06); }
|
||
|
||
.p-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 55%);
|
||
opacity: 0;
|
||
transition: opacity 0.38s ease;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding: 26px 28px;
|
||
}
|
||
.p-item:hover .p-overlay { opacity: 1; }
|
||
|
||
.p-info .p-cat {
|
||
font-size: 9.5px;
|
||
letter-spacing: 0.22em;
|
||
text-transform: uppercase;
|
||
color: rgba(255,255,255,0.55);
|
||
margin-bottom: 5px;
|
||
}
|
||
.p-info .p-name {
|
||
font-family: var(--serif);
|
||
font-size: 1.35rem;
|
||
font-weight: 400;
|
||
color: var(--white);
|
||
line-height: 1.15;
|
||
}
|
||
|
||
/* ── Lightbox ── */
|
||
.lb-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0,0,0,0.82);
|
||
z-index: 900;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.28s ease;
|
||
}
|
||
.lb-overlay.open {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
}
|
||
.lb-panel {
|
||
background: var(--white);
|
||
width: 100%;
|
||
max-width: 960px;
|
||
max-height: 90vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-y: auto;
|
||
}
|
||
.lb-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 18px 28px;
|
||
border-bottom: 1px solid var(--grey-light);
|
||
flex-shrink: 0;
|
||
}
|
||
.lb-title {
|
||
font-family: var(--serif);
|
||
font-size: 1.45rem;
|
||
font-weight: 400;
|
||
font-style: italic;
|
||
}
|
||
.lb-close {
|
||
background: none;
|
||
border: none;
|
||
font-size: 28px;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
color: var(--grey-mid);
|
||
padding: 0 0 2px 16px;
|
||
transition: color 0.2s;
|
||
}
|
||
.lb-close:hover { color: var(--black); }
|
||
|
||
.lb-stage {
|
||
position: relative;
|
||
background: #111;
|
||
flex-shrink: 0;
|
||
}
|
||
.lb-main-img {
|
||
display: block;
|
||
width: 100%;
|
||
max-height: 58vh;
|
||
object-fit: contain;
|
||
}
|
||
.lb-arrow {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
background: rgba(0,0,0,0.45);
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 2rem;
|
||
line-height: 1;
|
||
width: 48px;
|
||
height: 64px;
|
||
cursor: pointer;
|
||
transition: background 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.lb-arrow:hover { background: rgba(0,0,0,0.75); }
|
||
.lb-prev { left: 0; }
|
||
.lb-next { right: 0; }
|
||
.lb-arrow.hidden { display: none; }
|
||
|
||
.lb-footer {
|
||
}
|
||
.lb-thumbs {
|
||
display: flex;
|
||
gap: 4px;
|
||
padding: 10px 12px;
|
||
overflow-x: auto;
|
||
background: #f0f0f0;
|
||
border-bottom: 1px solid var(--grey-light);
|
||
}
|
||
.lb-thumbs:empty { display: none; }
|
||
.lb-thumb {
|
||
flex-shrink: 0;
|
||
width: 72px;
|
||
height: 52px;
|
||
object-fit: cover;
|
||
cursor: pointer;
|
||
opacity: 0.55;
|
||
transition: opacity 0.2s;
|
||
outline: 2px solid transparent;
|
||
outline-offset: 0;
|
||
}
|
||
.lb-thumb:hover { opacity: 0.85; }
|
||
.lb-thumb.active { opacity: 1; outline-color: var(--black); }
|
||
|
||
.lb-info {
|
||
padding: 20px 28px 24px;
|
||
}
|
||
.lb-counter {
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
color: var(--grey-mid);
|
||
margin-bottom: 10px;
|
||
}
|
||
.lb-desc {
|
||
font-size: 13.5px;
|
||
line-height: 1.72;
|
||
color: var(--grey-dark);
|
||
}
|
||
.lb-desc:empty { display: none; }
|
||
|
||
/* ── Before/After Slider ── */
|
||
.ba-section {
|
||
padding: 20px 28px 26px;
|
||
border-top: 1px solid var(--grey-light);
|
||
}
|
||
.ba-section-label {
|
||
font-size: 10px;
|
||
letter-spacing: 0.28em;
|
||
text-transform: uppercase;
|
||
color: var(--grey-mid);
|
||
margin-bottom: 14px;
|
||
}
|
||
.ba-slider {
|
||
position: relative;
|
||
overflow: hidden;
|
||
cursor: col-resize;
|
||
user-select: none;
|
||
touch-action: none;
|
||
aspect-ratio: 3/2;
|
||
background: #111;
|
||
}
|
||
.ba-img {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
pointer-events: none;
|
||
display: block;
|
||
}
|
||
.ba-img-before {
|
||
clip-path: inset(0 50% 0 0);
|
||
z-index: 1;
|
||
}
|
||
.ba-divider {
|
||
position: absolute;
|
||
top: 0; left: 50%;
|
||
width: 2px; height: 100%;
|
||
background: rgba(255,255,255,0.9);
|
||
transform: translateX(-50%);
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
}
|
||
.ba-handle {
|
||
position: absolute;
|
||
top: 50%; left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 46px; height: 46px;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 17px;
|
||
letter-spacing: -2px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.35);
|
||
z-index: 3;
|
||
pointer-events: none;
|
||
}
|
||
.ba-tag {
|
||
position: absolute;
|
||
bottom: 12px;
|
||
background: rgba(0,0,0,0.52);
|
||
color: #fff;
|
||
font-size: 9.5px;
|
||
font-family: var(--sans);
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
padding: 4px 10px;
|
||
z-index: 2;
|
||
pointer-events: none;
|
||
}
|
||
.ba-tag-before { left: 12px; }
|
||
.ba-tag-after { right: 12px; }
|
||
|
||
/* ── Services ── */
|
||
#leistungen { background: var(--off-white); }
|
||
|
||
.services-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 72px 96px;
|
||
}
|
||
|
||
.svc-num {
|
||
font-family: var(--serif);
|
||
font-size: 3.5rem;
|
||
font-weight: 300;
|
||
color: rgba(0,0,0,0.09);
|
||
line-height: 1;
|
||
margin-bottom: 12px;
|
||
}
|
||
.svc-label {
|
||
font-size: 10px;
|
||
letter-spacing: 0.28em;
|
||
text-transform: uppercase;
|
||
font-weight: 500;
|
||
color: var(--grey-mid);
|
||
margin-bottom: 8px;
|
||
}
|
||
.svc-headline {
|
||
font-family: var(--serif);
|
||
font-size: 1.55rem;
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
margin-bottom: 18px;
|
||
}
|
||
.svc-desc {
|
||
font-size: 13.5px;
|
||
color: var(--grey-dark);
|
||
line-height: 1.8;
|
||
margin-bottom: 18px;
|
||
}
|
||
.svc-list {
|
||
list-style: none;
|
||
}
|
||
.svc-list li {
|
||
font-size: 13px;
|
||
color: var(--grey-dark);
|
||
padding: 7px 0;
|
||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.svc-list li::before {
|
||
content: '';
|
||
display: block;
|
||
width: 14px; height: 1px;
|
||
background: var(--grey-mid);
|
||
flex-shrink: 0;
|
||
}
|
||
.svc-list li:last-child { border-bottom: none; }
|
||
|
||
/* sustainability strip */
|
||
.sustain-strip {
|
||
margin-top: 88px;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 2px;
|
||
}
|
||
.sustain-card {
|
||
background: var(--white);
|
||
padding: 36px 32px;
|
||
}
|
||
.sustain-card h4 {
|
||
font-size: 11px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
font-weight: 500;
|
||
margin-bottom: 12px;
|
||
}
|
||
.sustain-card p {
|
||
font-size: 13px;
|
||
color: var(--grey-dark);
|
||
line-height: 1.75;
|
||
}
|
||
|
||
/* ── About ── */
|
||
#ueber-uns { background: var(--white); }
|
||
|
||
.about-quote {
|
||
font-family: var(--serif);
|
||
font-size: clamp(1.25rem, 2.2vw, 1.8rem);
|
||
font-weight: 300;
|
||
font-style: italic;
|
||
color: var(--grey-dark);
|
||
line-height: 1.5;
|
||
max-width: 680px;
|
||
margin-bottom: 96px;
|
||
padding-left: 28px;
|
||
border-left: 2px solid var(--grey-light);
|
||
}
|
||
|
||
.team-member {
|
||
border-top: 1px solid rgba(0,0,0,0.12);
|
||
padding-top: 32px;
|
||
}
|
||
.team-member--solo {
|
||
max-width: 560px;
|
||
}
|
||
.team-name {
|
||
font-family: var(--serif);
|
||
font-size: 3rem;
|
||
font-weight: 400;
|
||
margin-bottom: 4px;
|
||
}
|
||
.team-role {
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--grey-mid);
|
||
margin-bottom: 32px;
|
||
}
|
||
.team-facts {
|
||
list-style: none;
|
||
}
|
||
.team-facts li {
|
||
display: flex;
|
||
gap: 20px;
|
||
padding: 9px 0;
|
||
border-bottom: 1px solid rgba(0,0,0,0.07);
|
||
font-size: 13.5px;
|
||
}
|
||
.team-facts li:last-child { border-bottom: none; }
|
||
.tf-key {
|
||
font-size: 10px;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--grey-mid);
|
||
min-width: 96px;
|
||
padding-top: 2px;
|
||
}
|
||
.tf-val { color: var(--grey-dark); line-height: 1.5; }
|
||
|
||
/* ── Contact ── */
|
||
#kontakt {
|
||
background: var(--black);
|
||
color: var(--white);
|
||
}
|
||
#kontakt .section-label { color: rgba(255,255,255,0.35); }
|
||
#kontakt .section-title { color: var(--white); }
|
||
|
||
.contact-layout {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 96px;
|
||
margin-top: 72px;
|
||
}
|
||
|
||
.contact-tagline {
|
||
font-family: var(--serif);
|
||
font-size: 1.2rem;
|
||
font-style: italic;
|
||
color: rgba(255,255,255,0.45);
|
||
margin-bottom: 48px;
|
||
font-weight: 300;
|
||
}
|
||
|
||
.c-item {
|
||
padding: 22px 0;
|
||
border-top: 1px solid rgba(255,255,255,0.1);
|
||
}
|
||
.c-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
|
||
|
||
.c-label {
|
||
font-size: 9.5px;
|
||
letter-spacing: 0.25em;
|
||
text-transform: uppercase;
|
||
color: rgba(255,255,255,0.35);
|
||
margin-bottom: 7px;
|
||
}
|
||
.c-value {
|
||
font-size: 15.5px;
|
||
font-weight: 300;
|
||
color: var(--white);
|
||
line-height: 1.5;
|
||
}
|
||
.c-value a {
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
.c-value a:hover { color: rgba(255,255,255,0.55); }
|
||
|
||
.contact-map-box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
.contact-map-box iframe {
|
||
width: 100%;
|
||
height: 640px;
|
||
border: none;
|
||
filter: grayscale(80%) contrast(1.05);
|
||
transition: filter 0.4s ease;
|
||
display: block;
|
||
}
|
||
.contact-map-box iframe:hover {
|
||
filter: grayscale(20%) contrast(1.0);
|
||
}
|
||
.map-link {
|
||
display: inline-block;
|
||
align-self: flex-start;
|
||
padding: 11px 28px;
|
||
border: 1px solid rgba(255,255,255,0.25);
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.18em;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
color: var(--white);
|
||
transition: all 0.25s;
|
||
}
|
||
.map-link:hover {
|
||
background: var(--white);
|
||
color: var(--black);
|
||
}
|
||
|
||
/* ── Footer ── */
|
||
footer {
|
||
background: var(--black);
|
||
border-top: 1px solid rgba(255,255,255,0.08);
|
||
padding: 36px var(--pad);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
footer p, footer a {
|
||
font-size: 10.5px;
|
||
letter-spacing: 0.1em;
|
||
color: rgba(255,255,255,0.28);
|
||
text-decoration: none;
|
||
}
|
||
footer a:hover { color: rgba(255,255,255,0.55); }
|
||
|
||
/* ── Responsive ── */
|
||
@media (max-width: 1100px) {
|
||
:root { --pad: 44px; }
|
||
.sustain-strip { grid-template-columns: repeat(2, 1fr); }
|
||
}
|
||
|
||
@media (max-width: 840px) {
|
||
:root { --pad: 28px; }
|
||
section { padding: 88px var(--pad); }
|
||
|
||
.nav-links {
|
||
display: none;
|
||
position: fixed;
|
||
top: var(--nav-h);
|
||
inset-inline: 0;
|
||
background: var(--white);
|
||
flex-direction: column;
|
||
padding: 28px var(--pad);
|
||
gap: 22px;
|
||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||
z-index: 199;
|
||
}
|
||
.nav-links.open { display: flex; }
|
||
.nav-burger { display: flex; }
|
||
|
||
.hero { padding: 0 var(--pad) 60px; }
|
||
|
||
.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
|
||
|
||
|
||
.services-grid { grid-template-columns: 1fr; gap: 56px; }
|
||
.sustain-strip { grid-template-columns: 1fr 1fr; }
|
||
|
||
|
||
.contact-layout { grid-template-columns: 1fr; gap: 56px; }
|
||
.map-placeholder { min-height: 240px; }
|
||
|
||
footer { flex-direction: column; gap: 10px; text-align: center; }
|
||
}
|
||
|
||
@media (max-width: 520px) {
|
||
.portfolio-grid { grid-template-columns: 1fr; }
|
||
|
||
.sustain-strip { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
<!-- Matomo -->
|
||
<script>
|
||
var _paq = window._paq = window._paq || [];
|
||
_paq.push(['trackPageView']);
|
||
_paq.push(['enableLinkTracking']);
|
||
(function() {
|
||
var u="//analytics.stranto.com/";
|
||
_paq.push(['setTrackerUrl', u+'matomo.php']);
|
||
_paq.push(['setSiteId', '3']);
|
||
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
|
||
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
|
||
})();
|
||
</script>
|
||
<!-- End Matomo Code -->
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
NAVIGATION
|
||
════════════════════════════════════════════ -->
|
||
<nav id="nav">
|
||
<a href="#home" class="nav-logo">
|
||
<img src="images/MarszalekLogoGrau.jpg" alt="Marszalek Architekten">
|
||
</a>
|
||
|
||
<button class="nav-burger" aria-label="Menü öffnen" id="burger">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
|
||
<ul class="nav-links" id="nav-links">
|
||
<li><a href="#projekte">Projekte</a></li>
|
||
<li><a href="#leistungen">Leistungen</a></li>
|
||
<li><a href="#ueber-uns">Über uns</a></li>
|
||
<li><a href="#kontakt">Kontakt</a></li>
|
||
</ul>
|
||
</nav>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
HERO
|
||
════════════════════════════════════════════ -->
|
||
<section class="hero" id="home">
|
||
<div class="hero-bg"></div>
|
||
<div class="hero-content">
|
||
<p class="hero-eyebrow">Architektur · Perchtoldsdorf · Wien & Umgebung</p>
|
||
<h1 class="hero-title">
|
||
Ihr Architekt für<br>
|
||
<em>Neubau und Umbau</em>
|
||
</h1>
|
||
<p class="hero-desc">
|
||
Zwei Generationen Erfahrung. Von der ersten Idee bis zur schlüsselfertigen Übergabe – unabhängig, transparent und mit höchstem Qualitätsanspruch.
|
||
</p>
|
||
<div style="display:flex;gap:14px;flex-wrap:wrap;">
|
||
<a href="#projekte" class="btn btn-light">Projekte ansehen</a>
|
||
<a href="marszalek-architekten-infosheet.pdf" download class="btn" style="background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.4);">Infosheet ↓</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
PROJEKTE
|
||
════════════════════════════════════════════ -->
|
||
<section id="projekte">
|
||
<div class="portfolio-top">
|
||
<div>
|
||
<span class="section-label">Unsere Arbeiten</span>
|
||
<h2 class="section-title">Projekte</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="portfolio-grid" id="portfolio-grid">
|
||
|
||
<div class="p-item" data-project="urbane-gartenoase">
|
||
<img src="images/ArminGarten-scaled.jpg" alt="Urbane Gartenoase" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Urbane Gartenoase</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="kleinwohnhaus">
|
||
<img src="images/DSF4943-HDR.jpg" alt="Kleinwohnhaus" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Kleinwohnhaus</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="gruenderzeitwohnung">
|
||
<img src="images/DSF4004-HDR.jpg" alt="Gründerzeitwohnung" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Gründerzeitwohnung</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="ordination">
|
||
<img src="images/DSF3686.jpg" alt="Ordination Innere Medizin" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Ordination Innere Medizin</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="villa">
|
||
<img src="images/DSF7917-HDR.jpg" alt="Villa mit Aussicht" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Villa mit Aussicht</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="modern-glas">
|
||
<img src="images/DSF9165.jpg" alt="Modern, offen, viel Glas" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Modern, offen, viel Glas</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="alles-aussicht">
|
||
<img src="images/259_1.jpg" alt="Alles Aussicht!" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Alles Aussicht!</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="landhaus">
|
||
<img src="images/258_3.jpg" alt="Landhaus" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Landhaus</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="winzerhaus-neusiedl">
|
||
<img src="images/228_1.jpg" alt="Winzerhaus Neusiedlersee" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Winzerhaus Neusiedlersee</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="dachausbau">
|
||
<img src="images/205_4.jpg" alt="Dachausbau – Denkmalschutz" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Dachausbau – Denkmalschutz</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="siegfried-ludwig-halle">
|
||
<img src="images/222_1.jpg" alt="Siegfried Ludwig Halle Perchtoldsdorf" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Siegfried Ludwig Halle</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="freizeitanlage">
|
||
<img src="images/198_2.jpg" alt="Freizeitanlage" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Freizeitanlage</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="winzerhaus-14jhdt">
|
||
<img src="images/203_5.jpg" alt="Winzerhaus aus dem 14. Jahrhundert" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Winzerhaus, 14. Jhdt.</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="wohnhaus">
|
||
<img src="images/194_2.jpg" alt="Wohnhaus" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Wohnhaus</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-project="sanierung">
|
||
<img src="images/174_1.jpg" alt="Sanierung" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<h3 class="p-name">Sanierung</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
LEISTUNGEN
|
||
════════════════════════════════════════════ -->
|
||
<section id="leistungen">
|
||
<div class="section-head">
|
||
<span class="section-label">Was wir bieten</span>
|
||
<h2 class="section-title">Leistungen</h2>
|
||
</div>
|
||
|
||
<div class="services-grid">
|
||
|
||
<div class="svc">
|
||
<div class="svc-num">01</div>
|
||
<p class="svc-label">Planen</p>
|
||
<h3 class="svc-headline">Von der Idee zum Plan</h3>
|
||
<p class="svc-desc">
|
||
Die meisten Menschen bauen einmal im Leben. Wir begleiten Sie von der ersten Skizze bis zur schlüsselfertigen Übergabe – mit unabhängiger Planung, Koordination und Bauüberwachung. Das reduziert Kosten, Stress und Bauzeit.
|
||
</p>
|
||
<ul class="svc-list">
|
||
<li>Neubau & Umbau</li>
|
||
<li>Denkmalschutz & Revitalisierung</li>
|
||
<li>Innenraumplanung & Möbeldesign</li>
|
||
<li>Dachgeschossausbau</li>
|
||
<li>Büro- & Gewerbebau</li>
|
||
<li>Wellness- & Freizeitanlagen</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="svc">
|
||
<div class="svc-num">02</div>
|
||
<p class="svc-label">Koordinieren</p>
|
||
<h3 class="svc-headline">Alles im Überblick</h3>
|
||
<p class="svc-desc">
|
||
Wir übernehmen Projektmanagement, Bauleitung, Kostencontrolling und Terminkoordination. Als unabhängiges Büro vertreten wir ausschließlich Ihre Interessen – ohne Interessenskonflikte.
|
||
</p>
|
||
<ul class="svc-list">
|
||
<li>Projektmanagement</li>
|
||
<li>Bauleitung</li>
|
||
<li>Kostenkontrolle</li>
|
||
<li>Terminplanung & Koordination</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="svc">
|
||
<div class="svc-num">03</div>
|
||
<p class="svc-label">Überwachen</p>
|
||
<h3 class="svc-headline">Alles im Plan</h3>
|
||
<p class="svc-desc">
|
||
Kosteneinhaltung, Termintreue und Qualitätssicherung durch regelmäßige Baustellenbesichtigungen und Rechnungsprüfung. Vollständige Transparenz für unsere Auftraggeber.
|
||
</p>
|
||
<ul class="svc-list">
|
||
<li>Qualitätssicherung</li>
|
||
<li>Rechnungsprüfung</li>
|
||
<li>Baustellenbesichtigungen</li>
|
||
<li>Transparente Dokumentation</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="svc">
|
||
<div class="svc-num">04</div>
|
||
<p class="svc-label">Beraten</p>
|
||
<h3 class="svc-headline">Auf gutem Grund bauen</h3>
|
||
<p class="svc-desc">
|
||
Ob Liegenschaftsbewertung, Baurechtsberatung oder Schadensbeurteilung – wir bieten unabhängige Expertise. Das erste Beratungsgespräch (60 Minuten) ist für Sie kostenlos.
|
||
</p>
|
||
<ul class="svc-list">
|
||
<li>Liegenschaftsbewertung</li>
|
||
<li>Baurechtsberatung</li>
|
||
<li>Mediation</li>
|
||
<li>Sachverständigengutachten</li>
|
||
<li>Erstes Gespräch kostenlos (60 Min.)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="sustain-strip">
|
||
<div class="sustain-card">
|
||
<h4>Von Grund auf sanieren</h4>
|
||
<p>Traditionelle und zeitgemäße Ansätze vereint – mit höchstem Wert auf Erhaltung des historischen Charakters.</p>
|
||
</div>
|
||
<div class="sustain-card">
|
||
<h4>Umweltschonende Bauweise</h4>
|
||
<p>Ausschließlich ökologisch verantwortungsvolle Materialien für Ihre Gesundheit und die Umwelt.</p>
|
||
</div>
|
||
<div class="sustain-card">
|
||
<h4>Energiesparen</h4>
|
||
<p>Passivhäuser, Niedrigenergiebau, Geothermie, Wärmepumpen und Lüftung mit Wärmerückgewinnung.</p>
|
||
</div>
|
||
<div class="sustain-card">
|
||
<h4>Lichtblicke</h4>
|
||
<p>Solaranlagen und Photovoltaik für nachhaltige Energieerzeugung und langfristige Kostenersparnis.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
ÜBER UNS
|
||
════════════════════════════════════════════ -->
|
||
<section id="ueber-uns">
|
||
<div class="section-head">
|
||
<span class="section-label">Ihr Architekt</span>
|
||
<h2 class="section-title">Über uns</h2>
|
||
</div>
|
||
|
||
<blockquote class="about-quote">
|
||
Unabhängige Architektur bedeutet für mich: ausschließlich Ihre Interessen vertreten – von der ersten Skizze bis zur schlüsselfertigen Übergabe.
|
||
</blockquote>
|
||
|
||
<div class="team-member team-member--solo">
|
||
<h3 class="team-name">Florian Marszalek</h3>
|
||
<p class="team-role">Dipl.-Ing. Architekt · Ziviltechniker</p>
|
||
<ul class="team-facts">
|
||
<li><span class="tf-key">Geboren</span><span class="tf-val">1977, Wien</span></li>
|
||
<li><span class="tf-key">Studium</span><span class="tf-val">Architektur, TU Wien</span></li>
|
||
<li><span class="tf-key">Ziviltechniker</span><span class="tf-val">Staatlich befugt seit 2010</span></li>
|
||
<li><span class="tf-key">Schwerpunkte</span><span class="tf-val">Neubau, Umbau, Innenraumplanung</span></li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
KONTAKT
|
||
════════════════════════════════════════════ -->
|
||
<section id="kontakt">
|
||
<div class="section-head">
|
||
<span class="section-label">Sprechen Sie uns an</span>
|
||
<h2 class="section-title">Kontakt</h2>
|
||
</div>
|
||
|
||
<div class="contact-layout">
|
||
<div>
|
||
<p class="contact-tagline">Wir freuen uns auf Ihre Anfrage.</p>
|
||
|
||
<div class="c-item">
|
||
<p class="c-label">Büro</p>
|
||
<p class="c-value">Architekt Dipl.Ing. Florian Marszalek</p>
|
||
</div>
|
||
<div class="c-item">
|
||
<p class="c-label">Adresse</p>
|
||
<p class="c-value">Elisabethstraße 14<br>2380 Perchtoldsdorf</p>
|
||
</div>
|
||
<div class="c-item">
|
||
<p class="c-label">Telefon & Fax</p>
|
||
<p class="c-value"><a href="tel:+4318693264">+43 (1) 869 32 64</a></p>
|
||
</div>
|
||
<div class="c-item">
|
||
<p class="c-label">E-Mail</p>
|
||
<p class="c-value"><a href="mailto:office@marszalekarchitekten.at">office@marszalekarchitekten.at</a></p>
|
||
</div>
|
||
<div class="c-item">
|
||
<p class="c-label">Erstgespräch</p>
|
||
<p class="c-value">Kostenlos · 60 Minuten</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-map-box">
|
||
<iframe
|
||
src="https://maps.google.com/maps?q=Elisabethstra%C3%9Fe+14%2C+2380+Perchtoldsdorf%2C+Austria&z=16&output=embed&hl=de"
|
||
allowfullscreen
|
||
loading="lazy"
|
||
referrerpolicy="no-referrer-when-downgrade"
|
||
title="Marszalek Architekten – Elisabethstraße 14, 2380 Perchtoldsdorf">
|
||
</iframe>
|
||
<a href="https://www.google.com/maps/search/Elisabethstra%C3%9Fe+14,+2380+Perchtoldsdorf"
|
||
target="_blank" rel="noopener noreferrer" class="map-link">Route planen ↗</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
DOWNLOAD
|
||
════════════════════════════════════════════ -->
|
||
<section style="background:#1a1a1a;padding:56px 64px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:28px;">
|
||
<div>
|
||
<span style="display:block;font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-bottom:10px;">Download</span>
|
||
<p style="font-family:'Cormorant Garamond',Georgia,serif;font-size:1.55rem;font-weight:300;color:#fff;line-height:1.2;">Marszalek Architekten<br><em>Infosheet & Leistungsübersicht</em></p>
|
||
</div>
|
||
<a href="marszalek-architekten-infosheet.pdf" download
|
||
style="display:inline-flex;align-items:center;gap:10px;padding:14px 36px;background:#fff;color:#0f0f0f;text-decoration:none;font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;transition:all 0.25s;white-space:nowrap;"
|
||
onmouseover="this.style.background='#0f0f0f';this.style.color='#fff';this.style.outline='1px solid #fff';"
|
||
onmouseout="this.style.background='#fff';this.style.color='#0f0f0f';this.style.outline='none';">
|
||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink:0;">
|
||
<path d="M7 1v8M3.5 6l3.5 3.5L10.5 6M2 12h10" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
PDF herunterladen
|
||
</a>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
FOOTER
|
||
════════════════════════════════════════════ -->
|
||
<footer>
|
||
<p>© 2025 Marszalek Architekten · Perchtoldsdorf</p>
|
||
<a href="mailto:office@marszalekarchitekten.at">office@marszalekarchitekten.at</a>
|
||
</footer>
|
||
|
||
|
||
<!-- ═══════════════════════════════════════════
|
||
LIGHTBOX
|
||
════════════════════════════════════════════ -->
|
||
<div id="lightbox" class="lb-overlay" aria-hidden="true" role="dialog" aria-modal="true">
|
||
<div class="lb-panel">
|
||
<div class="lb-header">
|
||
<h2 class="lb-title" id="lb-title"></h2>
|
||
<button class="lb-close" id="lb-close" aria-label="Schließen">×</button>
|
||
</div>
|
||
<div class="lb-stage">
|
||
<button class="lb-arrow lb-prev" id="lb-prev" aria-label="Zurück">‹</button>
|
||
<img class="lb-main-img" id="lb-main-img" src="" alt="">
|
||
<button class="lb-arrow lb-next" id="lb-next" aria-label="Weiter">›</button>
|
||
</div>
|
||
<div class="lb-footer">
|
||
<div class="lb-thumbs" id="lb-thumbs"></div>
|
||
<div class="lb-info">
|
||
<p class="lb-counter" id="lb-counter"></p>
|
||
<p class="lb-desc" id="lb-desc"></p>
|
||
</div>
|
||
<div class="ba-section" id="ba-section" style="display:none">
|
||
<p class="ba-section-label">Vorher / Nachher</p>
|
||
<div class="ba-slider" id="ba-slider">
|
||
<img class="ba-img ba-img-after" id="ba-img-after" src="" alt="Nachher">
|
||
<img class="ba-img ba-img-before" id="ba-img-before" src="" alt="Vorher">
|
||
<div class="ba-divider" id="ba-divider"></div>
|
||
<div class="ba-handle" id="ba-handle">◀▶</div>
|
||
<span class="ba-tag ba-tag-before">Vorher</span>
|
||
<span class="ba-tag ba-tag-after">Nachher</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* ── Mobile nav ── */
|
||
const burger = document.getElementById('burger');
|
||
const navLinks = document.getElementById('nav-links');
|
||
|
||
burger.addEventListener('click', () => {
|
||
navLinks.classList.toggle('open');
|
||
});
|
||
|
||
navLinks.querySelectorAll('a').forEach(a => {
|
||
a.addEventListener('click', () => navLinks.classList.remove('open'));
|
||
});
|
||
|
||
/* ── Smooth scroll (fallback for older browsers) ── */
|
||
document.querySelectorAll('a[href^="#"]').forEach(a => {
|
||
a.addEventListener('click', e => {
|
||
const target = document.querySelector(a.getAttribute('href'));
|
||
if (target) {
|
||
e.preventDefault();
|
||
target.scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
});
|
||
});
|
||
|
||
/* ── Lightbox ── */
|
||
const projects = {
|
||
'urbane-gartenoase': {
|
||
title: 'Urbane Gartenoase',
|
||
desc: 'Ein modernes Einfamilienhaus mit fließenden Raumübergängen und offenen Wohnbereichen, das sich harmonisch in eine vom Bauherrn gestaltete Gartenoase einfügt. Wärmepumpe mit Ringgrabenkollektor, Komfortlüftung und Hausautomation sorgen für Effizienz und Nachhaltigkeit – mit Vorbereitung für eine zukünftige Photovoltaikanlage.',
|
||
images: ['images/ArminGarten-scaled.jpg','images/ArminKueche.jpg','images/ArminGartenBeton.jpg','images/Klavier.jpg','images/ArminEinfahrt.jpg','images/Parkplatz.jpg','images/RminStiege.jpg']
|
||
},
|
||
'kleinwohnhaus': {
|
||
title: 'Kleinwohnhaus mit Gartenhäuschen',
|
||
desc: '',
|
||
images: ['images/DSF4943-HDR.jpg','images/DSF5433-HDR.jpg','images/DSF5084-HDR.jpg','images/DSF5524-HDR.jpg','images/DSF5447-HDR.jpg','images/DSF5475-HDR.jpg','images/DSF5154-HDR.jpg','images/DSF4895.jpg','images/DSF5231-HDR.jpg','images/DSF5424-HDR.jpg','images/DSF5212.jpg','images/DSF5417-HDR.jpg','images/DSF5319.jpg','images/DSF5406-HDR.jpg','images/DSF5112-HDR.jpg']
|
||
},
|
||
'gruenderzeitwohnung': {
|
||
title: 'Gründerzeitwohnung',
|
||
desc: 'Die Sanierung stand im Zeichen der Erhaltung und Wiederherstellung der historischen Bausubstanz. Unpassende Eingriffe der jüngeren Vergangenheit wurden rückgebaut, der Wohnkomfort und die technischen Einrichtungen auf zeitgemäßen Standard gebracht – und der ursprüngliche Charme der Wohnung wiederhergestellt.',
|
||
images: ['images/DSF4004-HDR.jpg','images/DSF4058-HDR.jpg','images/DSF4083-HDR.jpg','images/DSF4034-HDR.jpg','images/DSF4048-HDR.jpg','images/DSF4135-HDR.jpg','images/DSF4051-HDR.jpg','images/DSF4019-HDR.jpg','images/DSF4066-HDR.jpg']
|
||
},
|
||
'ordination': {
|
||
title: 'Ordination Innere Medizin',
|
||
desc: 'Die Ordinationsräume wurden innerhalb von nur drei Monaten – vom Auftrag bis zur Eröffnung – vollständig saniert. Von der bestehenden 200 m² Struktur konnte aufgrund des schlechten Zustands und aktualisierter Bauvorschriften nur das Tragwerk erhalten werden. Das Ergebnis: eine moderne, barrierefreie Ordination mit optimierter Raumaufteilung, zeitgemäßer Lichttechnik und höchsten Hygieneanforderungen.',
|
||
images: ['images/DSF3686.jpg','images/DSF3689.jpg','images/DSF3702.jpg','images/DSF3680.jpg','images/DSF3790-2.jpg','images/DSF3719.jpg','images/DSF3800.jpg','images/DSF3770.jpg','images/DSF3722.jpg','images/276_vh_2.jpg','images/DSF3731.jpg']
|
||
},
|
||
'villa': {
|
||
title: 'Villa mit Aussicht',
|
||
desc: 'Das Entwurfskonzept nutzt die talseitige Erschließung und die hangseitige Gartenanlage. Eingang und Garage befinden sich im Kellergeschoss, eine großzügige Luftraumzone mit Treppe führt in das Obergeschoss. Dazwischen liegt ein offener Wohn-, Ess- und Kochbereich mit Sonnen- und Gartenteam. Im Obergeschoss ergänzt ein überdachter Aussichtsbalkon die lichtdurchfluteten Schlaf- und Badebereiche.',
|
||
images: ['images/DSF7917-HDR.jpg','images/DSF7950-HDR.jpg','images/DSF7926-HDR.jpg','images/DSF7887-HDR.jpg','images/DSF8103-HDR.jpg','images/DSF8096.jpg','images/DSF8091-HDR.jpg','images/DSF8086-HDR.jpg','images/DSF7930-HDR.jpg','images/DSF8058-HDR.jpg','images/DSF8049-HDR.jpg','images/DSF8023-HDR.jpg','images/DSF8020-HDR.jpg','images/DSF8007-HDR.jpg','images/DSF7989-HDR.jpg','images/DSF7980-HDR.jpg']
|
||
},
|
||
'modern-glas': {
|
||
title: 'Modern, offen, viel Glas',
|
||
desc: 'Der großzügige, ebenerdige Wohnbereich öffnet sich fast vollständig zum Garten. Eine skulpturale Holzstiege führt ins Obergeschoss, wo ein offener Schlaf- und Badebereich mit Panoramaverglasung die Bewohner begeistert.',
|
||
images: ['images/DSF9165.jpg','images/DSF9330.jpg','images/DSF9343-HDR.jpg','images/DSF9316-HDR.jpg','images/DSF9305-HDR.jpg','images/DSF9278-HDR.jpg','images/DSF9266-HDR.jpg','images/DSF9148-HDR.jpg']
|
||
},
|
||
'alles-aussicht': {
|
||
title: 'Alles Aussicht!',
|
||
desc: 'Die Eigentümer eines in die Jahre gekommenen Kleinhäuschens wollten den schönen Ausblick in die Weinlandschaft genießen. Der Blick war nur wenige Gärten entfernt – doch das Haus stand in der dritten Reihe. Die unkonventionelle Lösung: das Wohngeschoss ins erste Obergeschoss verlegen, die Schlafräume nach unten. Weit öffenbare Panoramaverglasungen und ein ausgedehntes Sonnendeck lassen den Aussichtstraum wahr werden.',
|
||
images: ['images/259_1.jpg','images/259_2.jpg','images/259_3.jpg','images/259_4.jpg','images/259_5.jpg','images/259_6.jpg']
|
||
},
|
||
'landhaus': {
|
||
title: 'Landhaus',
|
||
desc: 'Raumnot, hohe Energiekosten und die in die Jahre gekommene Bausubstanz waren die Motivatoren zur Runderneuerung dieses Landhauses in Niederösterreich. Ein ausgebautes Dachgeschoss mit Dachflächenfenstern schafft zusätzlichen Wohnraum. Neue Fenster und moderne Dämmung reduzieren den Energieverbrauch deutlich – die elegante Lärchenschalung harmoniert mit der umgebenden Landschaft.',
|
||
images: ['images/258_3.jpg','images/258_5.jpg','images/258_1.jpg','images/258_4.jpg','images/258_6.jpg','images/258_7.jpg','images/258_9.jpg','images/258_10.jpg'],
|
||
beforeAfter: { before: 'images/258_1.jpg', after: 'images/258_5.jpg' }
|
||
},
|
||
'winzerhaus-neusiedl': {
|
||
title: 'Winzerhaus Neusiedlersee',
|
||
desc: 'Das alte Winzerhaus am Neusiedlersee wurde behutsam generalsaniert, wobei trotz moderner Baustandards höchster Wert auf die Erhaltung des ursprünglichen Charakters gelegt wurde. Es entstand ein mediterranes Wohngefühl für die Bauherrschaft.',
|
||
images: ['images/228_1.jpg','images/228_4.jpg','images/228_6.jpg','images/228_7.jpg','images/228_2.jpg','images/228_5.jpg'],
|
||
beforeAfter: { before: 'images/228_5.jpg', after: 'images/228_6.jpg' }
|
||
},
|
||
'dachausbau': {
|
||
title: 'Dachausbau – Denkmalschutz',
|
||
desc: 'Der Dachausbau im denkmalgeschützten Gebäude wurde mit minimalem Eingriff in die bestehende Struktur realisiert. Das historische Dachgebälk blieb nahezu vollständig erhalten und erfüllt dabei höchste Dämmstandards mit kontrollierter Wohnraumlüftung. Großzügige Dachterrassen bieten ein atemberaubendes Panorama im Herzen Wiens.',
|
||
images: ['images/205_4.jpg','images/205_5.jpg','images/205_7.jpg','images/205_1.jpg','images/205_3_compa.jpg'],
|
||
beforeAfter: { before: 'images/205_3_compa.jpg', after: 'images/205_7.jpg' }
|
||
},
|
||
'siegfried-ludwig-halle': {
|
||
title: 'Siegfried Ludwig Halle – Perchtoldsdorf',
|
||
desc: 'Die multifunktionale Anlage vereint Kletterzentrum, Restaurant, Mehrzweckhalle und Freizeitzentrum. Die Sporthalle ist für Schulsport und internationale Wettkämpfe (bis 1.000 Personen) geeignet, das Kletterzentrum bietet 18 m Vorstiegrouten und dreigeschossige Boulderanlage. Eine mobile 14,4 m Akustiktrennwand ermöglicht flexible Raumkonfigurationen. Niedrigstenergiekonstruktion in Hanglage fügt die großen Volumina harmonisch in den städtischen Kontext ein.',
|
||
images: ['images/222_1.jpg','images/222_20.jpg','images/222_28.jpg','images/222_41.jpg','images/222_7.jpg','images/222_14.jpg','images/222_6.jpg','images/222_5.jpg','images/222_12.jpg','images/222_6-1.jpg','images/222_7-1.jpg','images/222_18.jpg','images/222_23.jpg','images/222_39.jpg','images/222_27.jpg','images/222_42.jpg','images/222_44.jpg','images/222_34.jpg']
|
||
},
|
||
'freizeitanlage': {
|
||
title: 'Freizeitanlage',
|
||
desc: '',
|
||
images: ['images/198_2.jpg','images/198_1.jpg','images/198_6.jpg','images/198_4.jpg']
|
||
},
|
||
'winzerhaus-14jhdt': {
|
||
title: 'Winzerhaus aus dem 14. Jahrhundert',
|
||
desc: 'Aufgabe war die Sanierung eines baufälligen Winzerhauses aus dem 14. Jahrhundert mit gotischem Weinkeller unter Beibehaltung des ursprünglichen Charakters sowie ein Zubau zur Erfüllung der Raumbedürfnisse. Die thermische Masse dicker Wände, Kalkputz und ein Kachelofen mit Niedertemperaturheizung als Ergänzung prägen das Raumklima. Ein schmaler Verbindungsgang verknüpft den neuen Holzkubus, der bewusst im Kontrast zum unregelmäßigen Altbestand steht, zu einer harmonischen Einheit.',
|
||
images: ['images/203_5.jpg','images/203_1.jpg','images/203_7.jpg','images/203_4.jpg','images/203_3.jpg','images/203_6.jpg'],
|
||
beforeAfter: { before: 'images/203_3.jpg', after: 'images/203_4.jpg' }
|
||
},
|
||
'wohnhaus': {
|
||
title: 'Wohnhaus',
|
||
desc: '',
|
||
images: ['images/194_2.jpg','images/194_1.jpg']
|
||
},
|
||
'sanierung': {
|
||
title: 'Sanierung',
|
||
desc: '',
|
||
images: ['images/174_1.jpg','images/174_2.jpg'],
|
||
beforeAfter: { before: 'images/174_1.jpg', after: 'images/174_2.jpg' }
|
||
}
|
||
};
|
||
|
||
const lb = document.getElementById('lightbox');
|
||
const lbTitle = document.getElementById('lb-title');
|
||
const lbImg = document.getElementById('lb-main-img');
|
||
const lbDesc = document.getElementById('lb-desc');
|
||
const lbCounter = document.getElementById('lb-counter');
|
||
const lbThumbs = document.getElementById('lb-thumbs');
|
||
const lbPrev = document.getElementById('lb-prev');
|
||
const lbNext = document.getElementById('lb-next');
|
||
const lbClose = document.getElementById('lb-close');
|
||
|
||
let curImages = [], curIdx = 0;
|
||
|
||
function lbShow(projectId) {
|
||
const p = projects[projectId];
|
||
if (!p) return;
|
||
curImages = p.images;
|
||
curIdx = 0;
|
||
lbTitle.textContent = p.title;
|
||
lbDesc.textContent = p.desc;
|
||
// build thumbnails
|
||
lbThumbs.innerHTML = '';
|
||
if (curImages.length > 1) {
|
||
curImages.forEach((src, i) => {
|
||
const t = document.createElement('img');
|
||
t.src = src;
|
||
t.className = 'lb-thumb' + (i === 0 ? ' active' : '');
|
||
t.addEventListener('click', () => lbGo(i));
|
||
lbThumbs.appendChild(t);
|
||
});
|
||
}
|
||
lbRender();
|
||
baInit(p.beforeAfter ? p.beforeAfter.before : null,
|
||
p.beforeAfter ? p.beforeAfter.after : null);
|
||
lb.classList.add('open');
|
||
lb.setAttribute('aria-hidden', 'false');
|
||
document.body.style.overflow = 'hidden';
|
||
lbClose.focus();
|
||
}
|
||
|
||
function lbRender() {
|
||
lbImg.src = curImages[curIdx];
|
||
lbImg.alt = lbTitle.textContent;
|
||
lbCounter.textContent = curImages.length > 1
|
||
? (curIdx + 1) + ' / ' + curImages.length
|
||
: '';
|
||
lbPrev.classList.toggle('hidden', curIdx === 0);
|
||
lbNext.classList.toggle('hidden', curIdx === curImages.length - 1);
|
||
lbThumbs.querySelectorAll('.lb-thumb').forEach((t, i) => {
|
||
t.classList.toggle('active', i === curIdx);
|
||
});
|
||
// scroll active thumb into view
|
||
const active = lbThumbs.querySelector('.lb-thumb.active');
|
||
if (active) active.scrollIntoView({ block: 'nearest', inline: 'nearest' });
|
||
}
|
||
|
||
function lbGo(idx) {
|
||
curIdx = Math.max(0, Math.min(idx, curImages.length - 1));
|
||
lbRender();
|
||
}
|
||
|
||
function lbHide() {
|
||
lb.classList.remove('open');
|
||
lb.setAttribute('aria-hidden', 'true');
|
||
document.body.style.overflow = '';
|
||
}
|
||
|
||
lbPrev.addEventListener('click', () => lbGo(curIdx - 1));
|
||
lbNext.addEventListener('click', () => lbGo(curIdx + 1));
|
||
lbClose.addEventListener('click', lbHide);
|
||
lb.addEventListener('click', e => { if (e.target === lb) lbHide(); });
|
||
|
||
document.addEventListener('keydown', e => {
|
||
if (!lb.classList.contains('open')) return;
|
||
if (e.key === 'Escape') lbHide();
|
||
if (e.key === 'ArrowLeft') lbGo(curIdx - 1);
|
||
if (e.key === 'ArrowRight') lbGo(curIdx + 1);
|
||
});
|
||
|
||
// wire up grid items
|
||
document.querySelectorAll('.p-item[data-project]').forEach(item => {
|
||
item.addEventListener('click', () => lbShow(item.dataset.project));
|
||
});
|
||
|
||
/* ── Before/After slider ── */
|
||
const baSection = document.getElementById('ba-section');
|
||
const baSliderEl = document.getElementById('ba-slider');
|
||
const baImgBefore = document.getElementById('ba-img-before');
|
||
const baImgAfter = document.getElementById('ba-img-after');
|
||
const baDivider = document.getElementById('ba-divider');
|
||
const baHandleEl = document.getElementById('ba-handle');
|
||
let baDragging = false;
|
||
|
||
function baSetPos(clientX) {
|
||
const rect = baSliderEl.getBoundingClientRect();
|
||
const pos = Math.max(0.02, Math.min(0.98, (clientX - rect.left) / rect.width));
|
||
const pct = (pos * 100).toFixed(2) + '%';
|
||
baImgBefore.style.clipPath = `inset(0 ${((1 - pos) * 100).toFixed(2)}% 0 0)`;
|
||
baDivider.style.left = pct;
|
||
baHandleEl.style.left = pct;
|
||
}
|
||
|
||
function baInit(beforeSrc, afterSrc) {
|
||
if (!beforeSrc) { baSection.style.display = 'none'; return; }
|
||
baSection.style.display = '';
|
||
baImgAfter.src = afterSrc;
|
||
baImgBefore.src = beforeSrc;
|
||
baImgBefore.style.clipPath = 'inset(0 50% 0 0)';
|
||
baDivider.style.left = '50%';
|
||
baHandleEl.style.left = '50%';
|
||
}
|
||
|
||
baSliderEl.addEventListener('mousedown', e => {
|
||
baDragging = true; baSetPos(e.clientX); e.preventDefault();
|
||
});
|
||
document.addEventListener('mousemove', e => { if (baDragging) baSetPos(e.clientX); });
|
||
document.addEventListener('mouseup', () => { baDragging = false; });
|
||
baSliderEl.addEventListener('touchstart', e => {
|
||
baDragging = true; baSetPos(e.touches[0].clientX); e.preventDefault();
|
||
}, { passive: false });
|
||
document.addEventListener('touchmove', e => {
|
||
if (baDragging) baSetPos(e.touches[0].clientX);
|
||
}, { passive: false });
|
||
document.addEventListener('touchend', () => { baDragging = false; });
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|