/* Homepage image placement. */
.intro-project{width:min(100%,440px);margin:28px 0 0}
.intro-project img{width:100%;height:250px;object-fit:cover;object-position:center 54%}
.image-story.text-only-story{display:block;padding:48px 6.18%}
.image-story.text-only-story>div{max-width:760px;padding:0}
@media(max-width:700px){
  .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);column-gap:16px;row-gap:22px;align-items:start}
  .hero-copy{display:contents}
  .hero-copy .tag{grid-column:1/-1;grid-row:1;margin:0}
  .hero-copy h1{grid-column:1;grid-row:2;font-size:clamp(28px,6.1vw,45px);line-height:1.04;letter-spacing:-1.5px;margin:0}
  .hero .hero-figure{grid-column:2;grid-row:2/4;margin:0;width:100%}
  .hero .hero-figure figcaption{display:none}
  .hero-copy p{grid-column:1;grid-row:3;max-width:600px;margin:0}
  .hero-copy .button{grid-column:1/-1;grid-row:4;margin:0}
  .intro-project{width:min(75%,360px);margin:24px 0 0 auto}
  .intro-project img{height:clamp(150px,30vw,220px)}
  .image-story.text-only-story{margin:5px -22px 0;padding:35px 22px}
}
/* Service rows with thumbnails */
.service-row{grid-template-columns:.12fr 280px 1fr 60px;align-items:center}
.service-thumb{display:block;overflow:hidden;aspect-ratio:3/2;background:var(--soft)}
.service-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.service-row:hover .service-thumb img{transform:scale(1.04)}
@media(max-width:1000px){.service-row{grid-template-columns:.08fr 200px 1fr 50px}}
@media(max-width:700px){
  .service-row{grid-template-columns:25px 1fr 40px;grid-template-areas:"num thumb thumb" "num text arrow";align-items:start;row-gap:16px}
  .service-row .number{grid-area:num}
  .service-row .service-thumb{grid-area:thumb;aspect-ratio:16/10}
  .service-row>div{grid-area:text}
  .service-row .row-arrow{grid-area:arrow}
}

/* Handy hoch: eine Spalte, große Überschrift */
@media(max-width:700px){
  main .hero{display:flex;flex-direction:column;align-items:stretch;gap:26px;padding:26px 0 28px}
  main .hero-copy{display:block}
  main .hero-copy .tag,main .hero-copy h1,main .hero-copy p,main .hero-copy .button,main .hero .hero-figure{grid-column:auto;grid-row:auto}
  main .hero-copy .tag{margin-bottom:18px}
  main .hero-copy h1{font-size:clamp(44px,13vw,60px);letter-spacing:-2px;line-height:1.03;margin:0 0 20px}
  main .hero-copy p{margin:0 0 22px;max-width:380px}
  main .hero-copy .button{width:100%}
  main .hero .hero-figure{margin:0 -22px;width:auto}
}