/* Neaforge – Eigene Konzeptprojekte / ORA STUDIO
   Eigenständiger Bereich auf /websites; ohne Einfluss auf Formulare und andere Seiten. */
.web-services .nf-portfolio {
  background: #f0f3f1;
  padding: 94px 0 100px;
  border-block: 1px solid #e3e9e7;
  scroll-margin-top: 100px;
}
.web-services .nf-portfolio-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, .58fr);
  gap: clamp(25px, 5vw, 76px);
  align-items: end;
  margin-bottom: 42px;
}
.web-services .nf-portfolio-intro .kicker {
  margin: 0 0 19px;
  letter-spacing: .14em;
  color: #527568;
  font-size: 10px;
}
.web-services .nf-portfolio-intro h2 {
  max-width: 680px;
  color: #142236;
  margin: 0;
  font-size: clamp(31px, 3.65vw, 54px);
  line-height: 1.1;
  font-weight: 570;
  letter-spacing: -.047em;
}
.web-services .nf-portfolio-intro h2 em {
  color: #607d73;
  font-style: normal;
}
.web-services .nf-portfolio-intro > p {
  color: #647478;
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 3px;
}
.web-services .nf-portfolio-project {
  background: #fff;
  box-shadow: 0 26px 80px rgba(29, 55, 55, .08);
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  border: 1px solid #e2e9e5;
  border-radius: 21px;
  overflow: hidden;
}
.web-services .nf-portfolio-gallery {
  position: relative;
  min-width: 0;
  padding: 32px 25px 48px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: linear-gradient(150deg, #182b35 0%, #223c45 56%, #264044 100%);
}
.web-services .nf-portfolio-browser-bar {
  width: calc(100% - 46px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e9ece8;
  color: #647073;
  border-radius: 9px 9px 0 0;
  padding: 10px 16px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}
.web-services .nf-portfolio-browser-bar > span:first-child {display: flex;gap: 5px}
.web-services .nf-portfolio-browser-bar i {width: 6px;height: 6px;border-radius: 50%;background: #a7b3ae;display: block}
.web-services .nf-portfolio-desktop {
  display: block;
  overflow: hidden;
  width: calc(100% - 46px);
  border: 3px solid #e9ece8;
  border-top: 0;
  background: #fff;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 28px 50px rgba(5, 20, 24, .25);
}
.web-services .nf-portfolio-desktop img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(.18,.65,.32,1);
}
.web-services .nf-portfolio-desktop:hover img {transform: scale(1.025)}
.web-services .nf-portfolio-phone {
  position: absolute;
  width: clamp(114px, 27%, 176px);
  bottom: 68px;
  right: 14px;
  border-radius: 24px;
  padding: 8px 5px 7px;
  border: 3px solid #2a3335;
  background: #2a3335;
  box-shadow: 0 22px 35px rgba(0, 0, 0, .32);
  transform: rotate(3deg);
  pointer-events: none;
}
.web-services .nf-portfolio-phone img {display: block;width: 100%;height: auto;aspect-ratio: 390/844;object-fit: cover;border-radius: 16px}
.web-services .nf-portfolio-phone-notch {width: 34%;height: 8px;border-radius: 0 0 7px 7px;position: absolute;top: 5px;left: 33%;background: #2a3335;z-index: 1}
.web-services .nf-portfolio-gallery-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 17px;
  left: 26px;
  right: 26px;
  color: #b8ccc9;
  font-size: 9px;
  letter-spacing: .11em;
}
.web-services .nf-portfolio-copy {
  padding: clamp(31px, 4vw, 60px) clamp(28px, 3.8vw, 54px) 33px;
  color: #1a2a3b;
  align-self: center;
}
.web-services .nf-portfolio-label {display: flex;align-items: center;gap: 9px;color:#55796c;text-transform: uppercase;letter-spacing: .13em;font-size: 10px;font-weight: 750;margin: 0 0 20px}
.web-services .nf-portfolio-label span {display:block;background:#669c87;width: 7px;height: 7px;border-radius: 50%}
.web-services .nf-portfolio-copy h3 {font-size: clamp(37px, 3.7vw, 53px);font-weight: 550;letter-spacing: -.06em;line-height: 1.12;margin: 0 0 16px;color: #142236}
.web-services .nf-portfolio-copy h3 span {font-weight: 300;letter-spacing: -.04em}
.web-services .nf-portfolio-copy > p:not(.nf-portfolio-label):not(.nf-portfolio-disclaimer) {font-size: 13px;line-height: 1.9;color: #677577;margin: 0 0 19px}
.web-services .nf-portfolio-copy .nf-portfolio-lead {color: #203348 !important;font-size: 19px !important;font-weight: 600;line-height: 1.45 !important;margin-bottom: 13px !important}
.web-services .nf-portfolio-features {padding: 18px 0 18px;margin: 5px 0 20px;list-style:none;border-top:1px solid #e9eeeb;border-bottom:1px solid #e9eeeb;display:grid;gap: 11px}
.web-services .nf-portfolio-features li {display:flex;gap: 10px;align-items:flex-start;font-size: 12px;line-height: 1.55;color: #314457}
.web-services .nf-portfolio-features li:before {content:'✓';color:#4a9574;font-weight:800;flex:none}
.web-services .nf-portfolio-actions {display:flex;align-items:center;flex-wrap:wrap;gap:14px 21px}
.web-services .nf-portfolio-primary {display:inline-flex;align-items:center;justify-content:space-between;gap:18px;color:#eef8f2;background:#1a3942;border:1px solid #1a3942;padding:13px 18px;border-radius:8px;font-size:12px;font-weight:730;text-decoration:none;transition:background .2s,transform .2s}
.web-services .nf-portfolio-primary:hover {background:#27535a;transform:translateY(-2px)}
.web-services .nf-portfolio-secondary {color:#264854;font-size:12px;font-weight:760;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.web-services .nf-portfolio-secondary:hover {text-decoration:underline;text-underline-offset:5px}
.web-services .nf-portfolio-copy .nf-portfolio-disclaimer {font-size:10px;color:#798589;line-height:1.7;margin:21px 0 0}
@media(max-width:1100px){
  .web-services .nf-portfolio-project{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .web-services .nf-portfolio-gallery{padding:26px 18px 46px}
  .web-services .nf-portfolio-phone{right:4px;width:27%}
  .web-services .nf-portfolio-copy{padding:32px 27px 28px}
}
@media(max-width:850px){
  .web-services .nf-portfolio{padding:62px 0 66px}
  .web-services .nf-portfolio-intro{grid-template-columns:1fr;gap:15px;margin-bottom:27px}
  .web-services .nf-portfolio-intro h2{font-size:clamp(32px,6.7vw,48px)}
  .web-services .nf-portfolio-project{grid-template-columns:1fr}
  .web-services .nf-portfolio-gallery{min-height:410px;padding:35px 10% 51px}
  .web-services .nf-portfolio-phone{right:9%;bottom:64px;width:20%}
  .web-services .nf-portfolio-copy{padding:35px 35px 38px}
}
@media(max-width:520px){
  .web-services .nf-portfolio{padding:46px 0 54px}
  .web-services .nf-portfolio-intro h2{font-size:34px}
  .web-services .nf-portfolio-intro > p{font-size:12px}
  .web-services .nf-portfolio-gallery{min-height:255px;padding:24px 13px 44px}
  .web-services .nf-portfolio-browser-bar{width:calc(100% - 17px);font-size:7px;padding:7px 9px}
  .web-services .nf-portfolio-desktop{width:calc(100% - 17px)}
  .web-services .nf-portfolio-phone{right:5px;bottom:55px;width:26%;border-radius:17px;padding:4px 3px 5px}
  .web-services .nf-portfolio-phone img{border-radius:12px}
  .web-services .nf-portfolio-gallery-foot{font-size:7px;left:13px;right:13px;bottom:14px}
  .web-services .nf-portfolio-copy{padding:27px 23px 30px}
  .web-services .nf-portfolio-copy h3{font-size:41px}
  .web-services .nf-portfolio-actions{align-items:stretch;flex-direction:column;gap:16px}
  .web-services .nf-portfolio-primary{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .web-services .nf-portfolio-desktop img,.web-services .nf-portfolio-primary{transition:none !important}
}