/* Project selection begins only after the existing white MacBook sequence. */
#portfolio .portfolio-gallery{position:relative;left:50%;width:100vw;margin-left:-50vw;padding:clamp(5rem,9vw,9rem) 1.5rem clamp(5rem,8vw,8rem);background:#020307;color:#f8fbff;overflow:hidden;isolation:isolate}
.portfolio-gallery::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 45% 25% at 50% 48%,rgba(43,105,222,.16),transparent 90%),linear-gradient(90deg,transparent 49.9%,rgba(95,136,201,.045) 50%,transparent 50.1%);z-index:-1}
.pg-shell{width:min(100%,1180px);margin:auto}
.pg-heading{text-align:center;margin:0 auto clamp(2.2rem,5vw,4rem)}
.pg-heading .pre-title{color:#5b9fff}
.pg-heading h3{font-size:clamp(2.6rem,5vw,5.5rem);letter-spacing:-.045em;line-height:1.02;margin:.55rem 0 1rem;color:#fff}
.pg-heading p{font-size:clamp(.95rem,1.4vw,1.15rem);color:#96a5bd}
.pg-main{--pg-x:0deg;--pg-y:0deg;position:relative;width:min(100%,1000px);margin:auto;border:1px solid rgba(103,147,212,.28);border-radius:24px;overflow:hidden;background:#0d1019;box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 80px rgba(27,85,193,.12);transform:perspective(1800px) rotateX(var(--pg-x)) rotateY(var(--pg-y));transition:transform .34s cubic-bezier(.18,.7,.2,1),box-shadow .35s;transform-style:preserve-3d}
.pg-main:hover{box-shadow:0 45px 115px rgba(0,0,0,.7),0 0 90px rgba(41,102,217,.23)}
.pg-browser{height:49px;padding:0 1.25rem;display:flex;align-items:center;gap:1rem;background:#171a23;border-bottom:1px solid rgba(255,255,255,.1)}
.pg-dots,.pg-thumb-chrome{display:inline-flex;gap:5px;flex:none}
.pg-dots i,.pg-thumb-chrome i{width:9px;height:9px;border-radius:50%;background:#ef4b57}.pg-dots i:nth-child(2),.pg-thumb-chrome i:nth-child(2){background:#f7ba2d}.pg-dots i:nth-child(3),.pg-thumb-chrome i:nth-child(3){background:#27c36a}
.pg-domain{padding:.3rem .8rem;border:1px solid rgba(255,255,255,.1);border-radius:7px;color:#a6b4cc;background:rgba(255,255,255,.04);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-live-label{margin-left:auto;color:#83a3d6;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;white-space:nowrap}
.pg-frame-wrap{height:clamp(390px,53vw,610px);position:relative;overflow:hidden;overscroll-behavior:contain;background-size:cover;background-position:top center;background-color:#090c11}
.pg-frame-wrap iframe{display:block;width:140%;height:140%;border:0;transform:scale(.7142857);transform-origin:top left;opacity:0;transition:opacity .35s;pointer-events:auto}
.pg-frame-wrap.is-ready iframe{opacity:1}
.pg-frame-fallback{position:absolute;z-index:-1;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;background:linear-gradient(transparent,rgba(0,0,0,.82));font-size:.78rem;color:#fff}
.pg-frame-fallback a{color:#fff;font-weight:700;white-space:nowrap}
.pg-edge{position:absolute;z-index:4;top:49px;bottom:103px;width:6%;pointer-events:none}.pg-edge-left{left:0}.pg-edge-right{right:0}
.pg-main-info{position:relative;z-index:5;min-height:103px;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.6rem;background:linear-gradient(105deg,#10192e,#080a0f 70%)}
.pg-main-info h4{margin:0;color:#fff;font-size:clamp(1.25rem,2vw,1.8rem);letter-spacing:-.04em}.pg-main-info p{margin:.1rem 0 0;color:#9aabc5;font-size:.9rem}.pg-view{display:inline-flex;align-items:center;gap:.7rem;padding:.8rem 1.1rem;border:1px solid rgba(91,159,255,.36);border-radius:12px;color:#fff;background:#256dcc;text-decoration:none;font-size:.9rem;font-weight:800;white-space:nowrap;transition:background .2s,transform .2s}.pg-view:hover{background:#4a92f4;transform:translateY(-2px)}
.pg-choice-label{display:flex;justify-content:space-between;max-width:900px;margin:3rem auto .3rem;color:#8ca5c9;font-size:.75rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase}
.pg-fan{position:relative;max-width:940px;height:clamp(215px,25vw,310px);margin:0 auto;perspective:1300px}
.pg-thumb{--fan-x:0px;--fan-r:0deg;--fan-y:0px;position:absolute;left:50%;top:3rem;width:clamp(180px,19vw,240px);height:clamp(150px,16vw,205px);padding:0;border:1px solid rgba(160,184,219,.2);border-radius:12px;overflow:hidden;color:#fff;background:#141821;box-shadow:0 20px 45px rgba(0,0,0,.55);transform:translateX(calc(-50% + var(--fan-x))) translateY(var(--fan-y)) rotate(var(--fan-r));transition:transform .48s cubic-bezier(.2,.75,.2,1),box-shadow .3s,border-color .3s;cursor:pointer;text-align:left}
.pg-thumb:hover,.pg-thumb:focus-visible{z-index:20!important;transform:translateX(calc(-50% + var(--fan-x))) translateY(-23px) rotate(0deg) scale(1.13);box-shadow:0 38px 70px rgba(0,0,0,.8),0 0 35px rgba(71,141,255,.28);border-color:#6da9fb;outline:0}
.pg-thumb.is-active{border-color:#468af4}
.pg-thumb-chrome{height:30px;width:100%;align-items:center;padding:0 10px;background:#191c25}.pg-thumb-chrome i{width:6px;height:6px}
.pg-thumb img{display:block;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:top;filter:saturate(.94)}
.pg-thumb-name{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .65rem;background:linear-gradient(transparent,rgba(0,0,0,.86));font-size:.82rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-thumb:nth-child(1){--fan-x:-330px;--fan-r:-11deg;--fan-y:22px;z-index:1}.pg-thumb:nth-child(2){--fan-x:-205px;--fan-r:-7deg;--fan-y:9px;z-index:2}.pg-thumb:nth-child(3){--fan-x:-80px;--fan-r:-3deg;--fan-y:0px;z-index:3}.pg-thumb:nth-child(4){--fan-x:70px;--fan-r:3deg;--fan-y:0px;z-index:4}.pg-thumb:nth-child(5){--fan-x:200px;--fan-r:7deg;--fan-y:9px;z-index:3}.pg-thumb:nth-child(6){--fan-x:330px;--fan-r:11deg;--fan-y:22px;z-index:2}
#ueber-uns{background:#02040a;color:#fff}#ueber-uns::before{opacity:.65}#ueber-uns .about-card{background:linear-gradient(135deg,rgba(15,24,41,.96),rgba(6,10,18,.98));border-color:rgba(124,161,219,.16)}
@media(max-width:800px){.pg-fan{height:auto;display:flex;gap:.8rem;overflow-x:auto;padding:1rem .5rem 2rem;scroll-snap-type:x mandatory}.pg-thumb,.pg-thumb:nth-child(n){position:relative;left:auto;top:auto;flex:0 0 190px;height:160px;transform:none;scroll-snap-align:center}.pg-thumb:hover,.pg-thumb:focus-visible{transform:translateY(-8px) scale(1.02)}.pg-choice-label{margin-top:2rem}.pg-edge{display:none}}
@media(max-width:600px){#portfolio .portfolio-gallery{padding:4rem 1rem}.pg-frame-wrap{height:360px}.pg-frame-wrap iframe{width:185%;height:185%;transform:scale(.54054)}.pg-browser{height:42px}.pg-live-label{display:none}.pg-main-info{padding:1rem;min-height:90px}.pg-main-info h4{font-size:1.15rem}.pg-main-info p{font-size:.73rem}.pg-view{padding:.65rem .75rem;font-size:.8rem}.pg-heading h3{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){.pg-main{transform:none}.pg-thumb{transition:none}}

/* Compact first view: the live project and the choices share one viewport. */
#portfolio.section-padding{padding-bottom:0}
#portfolio .portfolio-gallery{padding:2rem 1.5rem 1.15rem}
.pg-heading{margin-bottom:1.15rem}
.pg-heading .pre-title{font-size:.67rem;letter-spacing:.18em}
.pg-heading h3{font-size:clamp(2rem,3.25vw,3.35rem);margin:.25rem 0 .35rem;line-height:1.08}
.pg-heading p{font-size:.9rem;margin:0}
.pg-main{width:min(100%,890px)}
.pg-browser{height:42px}
.pg-frame-wrap{height:clamp(255px,22vw,310px)}
.pg-edge{top:42px;bottom:76px}
.pg-main-info{min-height:76px;padding:.75rem 1.25rem}
.pg-main-info h4{font-size:1.3rem}
.pg-main-info p{font-size:.78rem;margin:0}
.pg-view{padding:.65rem .9rem;font-size:.82rem}
.pg-choice-label{max-width:860px;margin:1.25rem auto 0;font-size:.65rem}
.pg-fan{max-width:860px;height:183px}
.pg-thumb{top:.8rem;width:clamp(145px,15vw,190px);height:145px}
@media(max-width:800px){.pg-fan{height:auto;padding:.75rem .35rem 1rem}.pg-thumb,.pg-thumb:nth-child(n){top:auto;width:160px;flex:0 0 160px;height:135px}.pg-choice-label{margin-top:1rem}}
@media(max-width:600px){#portfolio .portfolio-gallery{padding:1.8rem 1rem .6rem}.pg-heading{margin-bottom:1rem}.pg-heading h3{font-size:1.85rem}.pg-heading p{font-size:.78rem}.pg-frame-wrap{height:280px}.pg-main-info{min-height:76px;padding:.7rem 1rem}.pg-main-info h4{font-size:1rem}.pg-choice-label{font-size:.6rem;letter-spacing:.12em}}
/* Keep the small heading visible beneath the fixed navigation. */
#portfolio .portfolio-gallery{padding-top:5rem}
@media(max-width:600px){#portfolio .portfolio-gallery{padding-top:5rem}}

/* Give the live preview and project fan a little more room. */
#portfolio .portfolio-gallery{padding-top:5.5rem;padding-bottom:3.5rem}
.pg-heading{margin-bottom:1.5rem}
.pg-main{width:min(100%,850px)}
.pg-frame-wrap{height:330px}
.pg-frame-wrap iframe{width:162%;height:162%;transform:scale(.617284)}
.pg-choice-label{margin-top:1.6rem}
@media(max-width:600px){#portfolio .portfolio-gallery{padding-top:5.25rem;padding-bottom:2.75rem}.pg-heading{margin-bottom:1.25rem}.pg-frame-wrap{height:300px}.pg-frame-wrap iframe{width:185%;height:185%;transform:scale(.54054)}.pg-choice-label{margin-top:1.25rem}}

/* More room to explore the live site and then choose another project. */
#portfolio .portfolio-gallery{padding-bottom:5rem}
.pg-heading{margin-bottom:2.25rem}
.pg-main{width:min(100%,820px)}
.pg-frame-wrap{height:clamp(405px,32vw,420px)}
.pg-frame-wrap iframe{width:170%;height:170%;transform:scale(.588235)}
.pg-choice-label{margin-top:2rem}

@media(max-width:600px){
  #portfolio .portfolio-gallery{padding-bottom:4rem}
  .pg-heading{margin-bottom:1.75rem}
  .pg-main{width:100%}
  .pg-frame-wrap{height:clamp(325px,92vw,430px)}
  .pg-frame-wrap iframe{width:185%;height:185%;transform:scale(.54054)}
  .pg-choice-label{margin-top:2rem}
}