.referenzweg{position:relative;display:flex;flex-direction:column;gap:80px;padding:12px 0 50px;isolation:isolate}
.referenzweg>.ref-card{width:46%;align-self:flex-start;aspect-ratio:4/3;flex:none;grid-column:auto;grid-row:auto;border-radius:12px;z-index:1;box-shadow:0 16px 40px #00000012;opacity:1;transform:none;cursor:zoom-in}
.referenzweg>.ref-card:nth-of-type(even){align-self:flex-end}
.referenzweg>.ref-card img{display:block}
.referenzweg>.ref-card:hover{transform:none}
.referenzweg>.ref-card:hover img{transform:none}
.referenzweg .ref-overlay{opacity:1;justify-content:flex-end;background:linear-gradient(transparent 40%,rgba(0,0,0,.78));pointer-events:none}
.referenzweg .ref-overlay .ref-title{font-size:clamp(23px,2.5vw,34px);line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.referenzweg .ref-meta{line-height:1.6;margin-bottom:8px}
.referenz-linie{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.referenz-linie path{fill:none;stroke:var(--line,#d6d0c2);stroke-width:2;stroke-linecap:round}
.referenz-linie .fortschritt{stroke:#6a775e;stroke-width:3}
.referenzweg.animiert>.ref-card{transition:opacity .7s ease,transform .7s ease}
.referenzweg.animiert>.ref-card:not(.sichtbar){opacity:0;transform:translateY(24px)}
@media(max-width:700px){.referenzweg{gap:36px;padding-left:22px}.referenzweg>.ref-card{width:100%;align-self:stretch!important}.referenzweg .ref-overlay{padding:16px}.referenzweg .ref-overlay .ref-title{font-size:24px}}
@media(prefers-reduced-motion:reduce){.referenzweg.animiert>.ref-card{opacity:1!important;transform:none!important;transition:none}.referenz-linie .fortschritt{display:none}}

.paneelweg>.service{width:46%;align-self:flex-start;position:relative;z-index:1;border-radius:12px;overflow:hidden;background:var(--paper);border:1px solid var(--line);opacity:1;transform:none}
.paneelweg>.service:nth-of-type(even){align-self:flex-end}
.paneelweg .service-img{aspect-ratio:4/3;height:auto;overflow:hidden}
.paneelweg .service-img img{display:block;width:100%;height:100%;object-fit:cover}
.paneelweg .service-body{padding:24px;align-items:flex-start}
.paneelweg .service-body h3{line-height:1.2;overflow-wrap:anywhere}
.paneelweg.animiert>.service{transition:opacity .7s ease,transform .7s ease}
.paneelweg.animiert>.service:not(.sichtbar){opacity:0;transform:translateY(24px)}
@media(max-width:700px){.paneelweg>.service{width:100%;align-self:stretch!important}.paneelweg .service-body{padding:20px}}
@media(prefers-reduced-motion:reduce){.paneelweg.animiert>.service{opacity:1!important;transform:none!important;transition:none}}

.objektweg>.obj-karte{width:46%;align-self:flex-start;position:relative;z-index:1;display:block;border-radius:12px;overflow:hidden;background:var(--paper);border:1px solid var(--line);opacity:1;transform:none}
.objektweg>.obj-karte:nth-of-type(even){align-self:flex-end}
.objektweg .obj-bild{aspect-ratio:4/3;height:auto;overflow:hidden}
.objektweg .obj-bild img{width:100%;height:100%;object-fit:cover;display:block}
.objektweg .obj-text{padding:24px}.objektweg .obj-text h3{line-height:1.2;overflow-wrap:anywhere}
.objektweg.animiert>.obj-karte{transition:opacity .7s ease,transform .7s ease}
.objektweg.animiert>.obj-karte:not(.sichtbar){opacity:0;transform:translateY(24px)}
@media(max-width:700px){.objektweg>.obj-karte{width:100%;align-self:stretch!important}}
@media(prefers-reduced-motion:reduce){.objektweg.animiert>.obj-karte{opacity:1!important;transform:none!important;transition:none}}

/* Kompakter Verlauf der Designobjekte, passend zur Fertigung. */
.referenzweg.objektweg{gap:28px}
@media(min-width:701px){
  .referenzweg.objektweg>.obj-karte+.obj-karte{margin-top:-120px}
}
@media(max-width:700px){
  .referenzweg.objektweg>.obj-karte{margin-top:0}
}