cgasser
c545b464fa
All 15 project images now served from images/ — fixes mobile loading caused by hotlink protection on the WordPress server blocking requests without a matching Referer header. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1065 lines
33 KiB
HTML
1065 lines
33 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.">
|
||
<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: rgba(153,204,0,0.97);
|
||
backdrop-filter: blur(8px);
|
||
-webkit-backdrop-filter: blur(8px);
|
||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||
transition: background 0.35s;
|
||
}
|
||
|
||
.nav-logo {
|
||
text-decoration: none;
|
||
line-height: 1.2;
|
||
}
|
||
.nav-logo .l1 {
|
||
font-family: var(--sans);
|
||
font-size: 15.5px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
}
|
||
.nav-logo .l2 {
|
||
font-family: var(--sans);
|
||
font-size: 11px;
|
||
font-weight: 300;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
color: rgba(0,0,0,0.5);
|
||
}
|
||
|
||
.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 {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
justify-content: space-between;
|
||
margin-bottom: 48px;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
}
|
||
|
||
.filter-bar {
|
||
display: flex;
|
||
list-style: none;
|
||
}
|
||
.filter-bar button {
|
||
background: none;
|
||
border: 1px solid rgba(0,0,0,0.15);
|
||
border-right: none;
|
||
padding: 9px 22px;
|
||
font-family: var(--sans);
|
||
font-size: 10.5px;
|
||
font-weight: 400;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
cursor: pointer;
|
||
color: var(--grey-dark);
|
||
transition: all 0.22s;
|
||
}
|
||
.filter-bar li:last-child button { border-right: 1px solid rgba(0,0,0,0.15); }
|
||
.filter-bar button.active,
|
||
.filter-bar button:hover {
|
||
background: var(--black);
|
||
color: var(--white);
|
||
border-color: var(--black);
|
||
z-index: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
/* ── 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-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 72px;
|
||
}
|
||
.team-member {
|
||
border-top: 1px solid rgba(0,0,0,0.12);
|
||
padding-top: 32px;
|
||
}
|
||
.team-name {
|
||
font-family: var(--serif);
|
||
font-size: 2.1rem;
|
||
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); }
|
||
.portfolio-top { flex-direction: column; align-items: flex-start; }
|
||
|
||
.services-grid { grid-template-columns: 1fr; gap: 56px; }
|
||
.sustain-strip { grid-template-columns: 1fr 1fr; }
|
||
|
||
.team-grid { grid-template-columns: 1fr; gap: 56px; }
|
||
.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; }
|
||
.filter-bar button { padding: 8px 14px; font-size: 9.5px; }
|
||
.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">
|
||
<span class="l1">Marszalek Architekten</span>
|
||
<span class="l2">Perchtoldsdorf</span>
|
||
</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>
|
||
<ul class="filter-bar">
|
||
<li><button class="active" data-filter="all">Alle</button></li>
|
||
<li><button data-filter="wohnen">Wohnen</button></li>
|
||
<li><button data-filter="arbeiten">Arbeiten</button></li>
|
||
<li><button data-filter="erholen">Erholen</button></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="portfolio-grid" id="portfolio-grid">
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/ArminGarten-scaled.jpg" alt="Urbane Gartenoase" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Urbane Gartenoase</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/DSF4943-HDR.jpg" alt="Kleinwohnhaus" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Kleinwohnhaus</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/DSF4004-HDR.jpg" alt="Gründerzeitwohnung" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Gründerzeitwohnung</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="arbeiten">
|
||
<img src="images/DSF3686.jpg" alt="Ordination Innere Medizin" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Arbeiten</p>
|
||
<h3 class="p-name">Ordination Innere Medizin</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/DSF7917-HDR.jpg" alt="Villa mit Aussicht" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Villa mit Aussicht</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/DSF9165.jpg" alt="Modern, offen, viel Glas" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Modern, offen, viel Glas</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/259_1.jpg" alt="Alles Aussicht!" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Alles Aussicht!</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/258_3.jpg" alt="Landhaus" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Landhaus</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/228_1.jpg" alt="Winzerhaus Neusiedlersee" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Winzerhaus Neusiedlersee</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/205_4.jpg" alt="Dachausbau – Denkmalschutz" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Dachausbau – Denkmalschutz</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="erholen">
|
||
<img src="images/222_1.jpg" alt="Siegfried Ludwig Halle Perchtoldsdorf" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Erholen</p>
|
||
<h3 class="p-name">Siegfried Ludwig Halle</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="erholen">
|
||
<img src="images/198_2.jpg" alt="Freizeitanlage" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Erholen</p>
|
||
<h3 class="p-name">Freizeitanlage</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/203_5.jpg" alt="Winzerhaus aus dem 14. Jahrhundert" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Winzerhaus, 14. Jhdt.</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/194_2.jpg" alt="Wohnhaus" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<h3 class="p-name">Wohnhaus</h3>
|
||
</div></div>
|
||
</div>
|
||
|
||
<div class="p-item" data-cat="wohnen">
|
||
<img src="images/174_1.jpg" alt="Sanierung" loading="lazy">
|
||
<div class="p-overlay"><div class="p-info">
|
||
<p class="p-cat">Wohnen</p>
|
||
<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">Ihre Architekten</span>
|
||
<h2 class="section-title">Über uns</h2>
|
||
</div>
|
||
|
||
<blockquote class="about-quote">
|
||
Um etwas zu bauen benötigt man ein solides Fundament. Unser Fundament ist die Erfahrung aus zwei Generationen – vereint durch Kreativität, Verlässlichkeit und die Leidenschaft für gute Architektur.
|
||
</blockquote>
|
||
|
||
<div class="team-grid">
|
||
|
||
<div class="team-member">
|
||
<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>
|
||
|
||
<div class="team-member">
|
||
<h3 class="team-name">Herbert Marszalek</h3>
|
||
<p class="team-role">Dipl.-Ing. Architekt · Ziviltechniker (ruhend)</p>
|
||
<ul class="team-facts">
|
||
<li><span class="tf-key">Geboren</span><span class="tf-val">1949, 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 1983</span></li>
|
||
<li><span class="tf-key">Zertifizierung</span><span class="tf-val">Zertifizierter Mediator</span></li>
|
||
<li><span class="tf-key">Auszeichnung</span><span class="tf-val">Goldenes Ehrenzeichen für Verdienste um das Bundesland Niederösterreich</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</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>
|
||
|
||
|
||
<script>
|
||
/* ── Portfolio filter ── */
|
||
const filterBtns = document.querySelectorAll('.filter-bar button');
|
||
const items = document.querySelectorAll('.p-item');
|
||
|
||
filterBtns.forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
filterBtns.forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
const f = btn.dataset.filter;
|
||
items.forEach(item => {
|
||
item.classList.toggle('hidden', f !== 'all' && item.dataset.cat !== f);
|
||
});
|
||
});
|
||
});
|
||
|
||
/* ── 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' });
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|