Major redesign: white nav, project lightbox with gallery + before/after slider
- 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>
This commit is contained in:
628
index.html
628
index.html
@@ -54,31 +54,20 @@
|
||||
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);
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.1);
|
||||
transition: background 0.35s;
|
||||
}
|
||||
|
||||
.nav-logo {
|
||||
text-decoration: none;
|
||||
line-height: 1.2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.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-logo img {
|
||||
height: 34px;
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
@@ -232,40 +221,7 @@
|
||||
#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 {
|
||||
@@ -317,6 +273,209 @@
|
||||
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); }
|
||||
|
||||
@@ -416,18 +575,16 @@
|
||||
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-member--solo {
|
||||
max-width: 560px;
|
||||
}
|
||||
.team-name {
|
||||
font-family: var(--serif);
|
||||
font-size: 2.1rem;
|
||||
font-size: 3rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@@ -586,12 +743,12 @@
|
||||
.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; }
|
||||
|
||||
@@ -600,7 +757,7 @@
|
||||
|
||||
@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>
|
||||
@@ -626,8 +783,7 @@
|
||||
════════════════════════════════════════════ -->
|
||||
<nav id="nav">
|
||||
<a href="#home" class="nav-logo">
|
||||
<span class="l1">Marszalek Architekten</span>
|
||||
<span class="l2">Perchtoldsdorf</span>
|
||||
<img src="images/MarszalekLogoGrau.jpg" alt="Marszalek Architekten">
|
||||
</a>
|
||||
|
||||
<button class="nav-burger" aria-label="Menü öffnen" id="burger">
|
||||
@@ -674,132 +830,111 @@
|
||||
<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">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Urbane Gartenoase</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Kleinwohnhaus</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Gründerzeitwohnung</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="arbeiten">
|
||||
<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">
|
||||
<p class="p-cat">Arbeiten</p>
|
||||
<h3 class="p-name">Ordination Innere Medizin</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Villa mit Aussicht</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Alles Aussicht!</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Landhaus</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Winzerhaus Neusiedlersee</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Dachausbau – Denkmalschutz</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="erholen">
|
||||
<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">
|
||||
<p class="p-cat">Erholen</p>
|
||||
<h3 class="p-name">Siegfried Ludwig Halle</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="erholen">
|
||||
<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">
|
||||
<p class="p-cat">Erholen</p>
|
||||
<h3 class="p-name">Freizeitanlage</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Winzerhaus, 14. Jhdt.</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Wohnhaus</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
|
||||
<div class="p-item" data-cat="wohnen">
|
||||
<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">
|
||||
<p class="p-cat">Wohnen</p>
|
||||
<h3 class="p-name">Sanierung</h3>
|
||||
</div></div>
|
||||
</div>
|
||||
@@ -910,39 +1045,23 @@
|
||||
════════════════════════════════════════════ -->
|
||||
<section id="ueber-uns">
|
||||
<div class="section-head">
|
||||
<span class="section-label">Ihre Architekten</span>
|
||||
<span class="section-label">Ihr Architekt</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.
|
||||
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-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 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>
|
||||
|
||||
@@ -1025,22 +1144,42 @@
|
||||
</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>
|
||||
/* ── 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');
|
||||
@@ -1063,6 +1202,215 @@
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* ── 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>
|
||||
|
||||
Reference in New Issue
Block a user