.planung-v25 figure{margin:0;min-width:0}.planung-v25 img,.planung-v25 video{display:block;width:100%}.planung-v25 figcaption{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.6}.planung-v25 h2{font-size:clamp(30px,3.1vw,48px);line-height:1.15;letter-spacing:-.035em}.planung-v25 p{line-height:1.8}.planung-v25 .plan-small{font-size:13px;color:var(--muted)}.plan-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;padding-top:70px;padding-bottom:64px}.plan-hero h1{font-size:clamp(44px,4.7vw,72px);line-height:1.07;letter-spacing:-.05em;margin:24px 0}.plan-lead{font-size:19px;color:var(--muted);max-width:560px}.plan-hero .actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin:32px 0}.plan-hero img{aspect-ratio:1/1.04;object-fit:cover;object-position:62% center}.plan-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding-bottom:76px}.plan-benefits article{border-top:1px solid var(--line);padding-top:24px}.plan-benefits span{font-size:12px;color:var(--muted)}.plan-benefits h2{font-size:24px;margin:20px 0 12px;letter-spacing:-.02em}.plan-benefits p{font-size:15px;color:var(--muted)}.plan-heading{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;margin-bottom:42px}.plan-heading p:not(.eyebrow){color:var(--muted)}.plan-band{background:#eae7e1}.plan-dark{background:#252623;color:#f5f3ef}.plan-dark .eyebrow,.plan-dark .plan-heading p{color:#c9c8c0}.plan-youtube{aspect-ratio:16/9;background:#151613;position:relative;border:1px solid #55564f}.plan-video-cover{height:100%;padding:6%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;background:linear-gradient(90deg,#1a1c1cf5,#1a1c1cc4),url('/assets/images/projects/stuttgart-ost/technische-planung.webp') center/cover}.plan-video-kicker{font-size:12px;letter-spacing:.12em;color:#ceccc2}.plan-video-title{font-size:clamp(36px,5vw,72px);line-height:1.08;letter-spacing:-.04em;margin:28px 0}.plan-play{display:inline-flex;align-items:center;gap:14px;padding:17px 24px;background:#f5f3ef;border:0;color:#171717;font:inherit;cursor:pointer}.plan-play span{font-size:17px}.plan-video-cover p{font-size:13px;color:#ceccc2;margin-top:18px}.plan-youtube iframe{border:0;width:100%;height:100%;position:absolute;inset:0}.plan-video-meta{display:flex;justify-content:space-between;gap:30px;font-size:12px;color:#cfcdc7;align-items:baseline;margin-top:16px}.plan-video-meta a{text-decoration:underline;text-underline-offset:4px;flex-shrink:0}.plan-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:48px 0 0}.plan-steps li{border-top:1px solid var(--line);padding-top:25px}.plan-steps span{font-size:32px;color:var(--copper)}.plan-steps h3{font-size:21px;font-weight:500;margin:24px 0 14px}.plan-steps p{font-size:15px;color:var(--muted)}.plan-switch{display:flex;gap:10px;margin-bottom:22px}.plan-switch button{font:inherit;font-size:14px;padding:14px 22px;border:1px solid #aaa69e;background:transparent;color:var(--ink);cursor:pointer}.plan-switch button[aria-pressed=true]{background:var(--ink);color:white;border-color:var(--ink)}.plan-showcase{max-width:1100px;margin:0 auto!important}.plan-showcase img{aspect-ratio:3/2;object-fit:contain;background:#dcd8cf}.plan-animation,.plan-foundation,.plan-start{display:grid;grid-template-columns:1fr 1.35fr;gap:72px;align-items:center}.plan-animation h2,.plan-foundation h2,.plan-start h2{margin-bottom:28px}.plan-animation p,.plan-foundation p,.plan-start p{color:var(--muted)}.plan-animation video{aspect-ratio:16/9;object-fit:contain;background:#171717}.plan-foundation{grid-template-columns:1.2fr 1fr}.plan-foundation img{background:#fff;object-fit:contain}.plan-start ul{list-style:none;padding:0;margin:0}.plan-start li{border-top:1px solid var(--line);padding:23px 0;display:grid;grid-template-columns:.85fr 1.2fr;gap:22px}.plan-start li strong{font-weight:500}.plan-start li span{font-size:14px;color:var(--muted);line-height:1.7}.plan-start .btn{margin-top:24px}.plan-faq{max-width:980px}.plan-faq h2{margin-bottom:32px}.plan-faq details{border-top:1px solid #c8c3ba;padding:22px 0}.plan-faq summary{cursor:pointer;font-size:18px}.plan-faq details p{color:var(--muted);max-width:760px;margin-top:20px}.plan-pro{display:flex;justify-content:space-between;align-items:center;gap:32px;padding-top:42px;padding-bottom:42px;font-size:14px}.plan-pro p{color:var(--muted)}.plan-pro a{text-decoration:underline;text-underline-offset:4px}#planungsvideo,#ablauf,#entwurf-und-ergebnis{scroll-margin-top:110px}.planung-v25 button:focus-visible{outline:3px solid #b37b4c;outline-offset:5px}
@media(max-width:960px){.plan-hero,.plan-heading,.plan-animation,.plan-foundation,.plan-start{gap:32px}.plan-steps{grid-template-columns:1fr 1fr}.plan-benefits{gap:24px}.plan-video-meta{display:block}.plan-hero h1{font-size:48px}.plan-start li{grid-template-columns:1fr;gap:8px}}
@media(max-width:680px){.plan-hero,.plan-heading,.plan-animation,.plan-foundation,.plan-start,.plan-benefits,.plan-steps{grid-template-columns:1fr}.plan-hero{padding-top:44px;padding-bottom:44px}.plan-hero h1{font-size:48px}.plan-hero img{aspect-ratio:4/3;object-position:center}.plan-benefits{padding-bottom:48px}.plan-heading{gap:20px;margin-bottom:30px}.plan-steps{gap:30px;margin-top:30px}.plan-steps h3{margin-top:14px}.plan-video-cover{padding:22px}.plan-youtube{aspect-ratio:4/3}.plan-video-title{font-size:36px;margin:16px 0}.plan-video-kicker{font-size:9px}.plan-play{padding:12px 15px;font-size:14px}.plan-video-cover p{margin:12px 0 0;font-size:11px}.plan-switch{gap:8px}.plan-switch button{font-size:12px;padding:13px 10px;flex:1}.plan-pro{display:block}.plan-pro a{display:inline-block;margin-top:12px}.plan-faq summary{font-size:17px}.plan-animation,.plan-foundation,.plan-start{gap:32px}}
.plan-video-cover .plan-consent{max-width:720px;margin:0 0 18px!important;font-size:12px;line-height:1.65;color:#ceccc2}.plan-video-cover .plan-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}
@media(max-width:680px){.plan-video-cover .plan-consent{font-size:10.5px;margin:0 0 14px!important}}


/* v45 · Robust scrollytelling: sticky visual + real scroll stages */
.plan-scroll-story{
  background:#171817;
  color:#f5f3ef;
  padding:112px 0 96px;
}
.plan-scroll-story-inner{width:min(calc(100% - 48px),1320px)}
.plan-scroll-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.7fr);
  column-gap:72px;
  align-items:end;
  margin-bottom:68px;
}
.plan-scroll-intro .eyebrow{grid-column:1/-1;color:#bdbbb4;margin-bottom:10px}
.plan-scroll-intro h2{font-size:clamp(38px,4.6vw,66px);color:#f5f3ef;letter-spacing:-.045em}
.plan-scroll-intro>p:not(.eyebrow){margin:0;color:#bdbbb4;font-size:15px;line-height:1.7;max-width:520px;justify-self:end}
.plan-scroll-layout{
  display:grid;
  grid-template-columns:minmax(0,1.58fr) minmax(310px,.62fr);
  gap:64px;
  align-items:start;
}
.plan-scroll-visual-wrap{
  position:sticky;
  top:24px;
  min-height:calc(100vh - 48px);
  display:flex;
  align-items:center;
}
.plan-scroll-visual{
  width:100%;
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0d0e0d;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.24);
}
.plan-scroll-layer{
  position:absolute;
  inset:0;
  margin:0!important;
  opacity:0;
  transform:scale(1.035);
  pointer-events:none;
  transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform 1.15s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.plan-scroll-layer.is-active{opacity:1;transform:scale(1);z-index:1}
.plan-scroll-layer img{width:100%;height:100%;object-fit:cover;object-position:center}
.plan-scroll-layer[data-story-layer="0"] img{object-fit:contain;background:#f8f8f6;padding:2.6%}
.plan-scroll-layer[data-story-layer="1"] img{object-position:center 48%}
.plan-scroll-layer[data-story-layer="2"] img{object-position:center 54%}
.plan-scroll-layer figcaption{
  position:absolute;left:20px;bottom:17px;z-index:4;margin:0;padding:7px 10px;
  color:#f5f3ef;background:rgba(16,17,16,.7);backdrop-filter:blur(6px);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.plan-scroll-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent 56%,rgba(0,0,0,.13))}
.plan-scroll-stage-label{
  position:absolute;z-index:5;top:18px;right:18px;padding:8px 11px;
  border:1px solid rgba(255,255,255,.25);background:rgba(18,19,18,.58);
  backdrop-filter:blur(7px);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.plan-scroll-progress{position:absolute;z-index:5;left:20px;right:20px;bottom:0;height:2px;background:rgba(255,255,255,.18);overflow:hidden}
.plan-scroll-progress span{display:block;width:0;height:100%;background:#f5f3ef;transition:width .35s ease}
.plan-scroll-narrative{padding-bottom:12vh}
.plan-scroll-stage{
  min-height:78vh;
  display:flex;
  align-items:center;
  opacity:.3;
  transform:translateY(18px);
  transition:opacity .45s ease,transform .55s ease;
}
.plan-scroll-stage.is-active{opacity:1;transform:none}
.plan-scroll-stage>div{max-width:430px;border-top:1px solid rgba(255,255,255,.2);padding-top:24px}
.plan-scroll-stage span{display:block;color:#bdbbb4;font-size:11px;letter-spacing:.13em;margin-bottom:17px}
.plan-scroll-stage h3{font-size:clamp(28px,2.65vw,40px);line-height:1.12;color:#f5f3ef;margin-bottom:19px;letter-spacing:-.035em}
.plan-scroll-stage p{margin:0;color:#bbb9b2;font-size:15px;line-height:1.75}
.plan-scroll-footer{
  display:flex;justify-content:space-between;gap:34px;align-items:baseline;
  margin-top:8px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);
}
.plan-scroll-footer .plan-small{margin:0;color:#a9a79f;max-width:720px}
.plan-scroll-footer .text-link{color:#f5f3ef;white-space:nowrap}

@media(max-width:980px) and (min-width:801px){
  .plan-scroll-layout{grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr);gap:34px}
  .plan-scroll-intro{grid-template-columns:1fr .75fr;gap:30px}
  .plan-scroll-stage h3{font-size:30px}
}

/* Mobile: readable sequence, no sticky scroll trapping. */
@media(max-width:800px){
  .plan-scroll-story{padding:76px 0;background:#171817}
  .plan-scroll-story-inner{width:min(calc(100% - 36px),1320px)}
  .plan-scroll-intro{display:block;margin-bottom:34px}
  .plan-scroll-intro h2{margin-bottom:18px}
  .plan-scroll-intro>p:not(.eyebrow){font-size:14px;max-width:620px}
  .plan-scroll-layout{display:flex;flex-direction:column;gap:34px}
  .plan-scroll-visual-wrap{position:relative;top:auto;min-height:0;width:100%;order:0}
  .plan-scroll-visual{aspect-ratio:16/10}
  .plan-scroll-vignette{display:none}
  .plan-scroll-narrative{padding:0;order:1}
  .plan-scroll-stage{min-height:0;opacity:1;transform:none;padding:26px 0;border-top:1px solid rgba(255,255,255,.18)}
  .plan-scroll-stage>div{max-width:none;border:0;padding:0}
  .plan-scroll-stage h3{font-size:27px;margin-bottom:12px}
  .plan-scroll-stage p{font-size:14px}
  .plan-scroll-footer{display:block;margin-top:28px}
  .plan-scroll-footer .text-link{display:inline-flex;margin-top:14px;white-space:normal}
}

@media(prefers-reduced-motion:reduce){
  .plan-scroll-layer,.plan-scroll-stage{transition:none!important}
}

/* v45 · Mobile fallback: each story stage carries its own image. */
.plan-scroll-mobile-media{display:none;margin:0}

@media(max-width:800px){
  /* On touch/mobile the sticky desktop visual is replaced by a true three-image sequence. */
  .plan-scroll-visual-wrap{display:none}
  .plan-scroll-narrative{width:100%}
  .plan-scroll-stage{
    display:block;
    padding:0 0 46px;
    margin:0 0 42px;
    border-top:0;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  .plan-scroll-stage:last-child{margin-bottom:0}
  .plan-scroll-mobile-media{
    display:block;
    margin:0 0 24px!important;
    background:#0d0e0d;
    border:1px solid rgba(255,255,255,.12);
    overflow:hidden;
  }
  .plan-scroll-mobile-media img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:16/10;
    object-fit:cover;
    object-position:center;
  }
  .plan-scroll-mobile-media[data-mobile-story-media="0"] img{
    object-fit:contain;
    background:#f8f8f6;
    padding:2.6%;
  }
  .plan-scroll-mobile-media[data-mobile-story-media="1"] img{object-position:center 48%}
  .plan-scroll-mobile-media[data-mobile-story-media="2"] img{object-position:center 54%}
  .plan-scroll-mobile-media figcaption{
    margin:0;
    padding:11px 13px;
    color:#f5f3ef;
    background:#111210;
    font-size:10.5px;
    line-height:1.45;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .plan-scroll-stage>div{
    padding:0 2px;
  }
}


/* v46 · Scrollytelling removed: static project sequence */
.plan-scroll-story-static{padding:96px 0;background:#171817}
.plan-scroll-story-static .plan-scroll-layout{display:block}
.plan-scroll-story-static .plan-scroll-visual-wrap{display:none}
.plan-scroll-story-static .plan-scroll-narrative{padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.plan-scroll-story-static .plan-scroll-stage{min-height:0;opacity:1;transform:none;padding:0;display:block}
.plan-scroll-story-static .plan-scroll-stage>div{max-width:none;border-top:1px solid rgba(255,255,255,.2);padding-top:24px}
.plan-scroll-story-static .plan-scroll-mobile-media{display:block;margin:0 0 24px}
.plan-scroll-story-static .plan-scroll-mobile-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#f8f8f6}
.plan-scroll-story-static .plan-scroll-mobile-media[data-mobile-story-media="0"] img{object-fit:contain;padding:2.6%}
.plan-scroll-story-static .plan-scroll-mobile-media figcaption{margin-top:10px;color:#a9a79f;font-size:12px;line-height:1.5}
.plan-scroll-story-static .plan-scroll-footer{margin-top:44px}
@media(max-width:900px){
  .plan-scroll-story-static .plan-scroll-narrative{grid-template-columns:1fr;gap:42px}
  .plan-scroll-story-static .plan-scroll-stage{border-top:0;margin:0}
  .plan-scroll-story-static .plan-scroll-mobile-media img{aspect-ratio:16/10}
}

/* v57 · 3D planning is presented as part of the complete build process */
.plan-role{padding-top:44px;padding-bottom:90px}
.plan-role-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(320px,.75fr);gap:82px;align-items:start;border-top:1px solid #d4d1ca;padding-top:42px}
.plan-role-inner h2{font-size:clamp(34px,4vw,56px);line-height:1.04;letter-spacing:-.04em;max-width:700px}
.plan-role-inner>div:last-child{max-width:620px;justify-self:end}
.plan-role-inner>div:last-child p{color:#66645f;line-height:1.75;margin:0 0 18px}
.plan-role-inner .text-link{margin-top:8px}
.plan-scroll-story-static .plan-scroll-stage:first-child .plan-scroll-mobile-media img{object-fit:contain;padding:2.6%;background:#f8f8f6}
@media (max-width:800px){
  .plan-role{padding-top:26px;padding-bottom:68px}
  .plan-role-inner{grid-template-columns:1fr;gap:24px;padding-top:32px}
  .plan-role-inner>div:last-child{justify-self:start;max-width:680px}
}

.plan-proof-projects{padding-top:88px;padding-bottom:88px}
.plan-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:38px}
.plan-project-grid article{min-width:0}
.plan-project-grid a{display:block}
.plan-project-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:18px;background:#e5e2dc}
.plan-project-grid span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7a7770;margin-bottom:10px}
.plan-project-grid h3{font-size:24px;line-height:1.18;margin:0 0 10px}
.plan-project-grid p{margin:0;color:#6b6963;font-size:15px;line-height:1.68}
@media (max-width:900px){.plan-project-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.plan-project-grid{grid-template-columns:1fr}.plan-proof-projects{padding-top:68px;padding-bottom:68px}}