/* On larger screens, the visible vehicle midpoint meets the card's top edge.
   Each offset accounts for the source photo's empty canvas; the motorcycle
   also retains its existing 1.45 crop. Phone layouts remain fully contained. */
@media(min-width:721px){
  .fp-home .fp-home-choices .fp-section-head{margin-bottom:96px}
  .fp-home .fp-home-class-grid{row-gap:96px}
  .fp-home :is(.fp-car-motif,.fp-motorcycle-motif,.fp-trailer-motif,.fp-lkw-motif){height:32px}
  .fp-site #klassen .fp-section-head{margin-bottom:120px}
  .fp-site #klassen .fp-class-photo-grid{row-gap:120px}
  .fp-site #klassen .fp-class-photo-grid>:is(.fp-car-card,.fp-motorcycle-card,.fp-trailer-card,.fp-lkw-card) .fp-premium-motif{height:64px}
  .fp-site :is(.fp-home-class-grid,.fp-class-photo-grid) :is(.fp-car-photo,.fp-motorcycle-photo,.fp-trailer-photo,.fp-lkw-photo){top:-32px;bottom:auto;transform:translate(-50%,var(--fp-vehicle-midpoint))}
  .fp-site :is(.fp-home-class-grid,.fp-class-photo-grid) .fp-car-photo{--fp-vehicle-midpoint:-50.8%}
  .fp-site :is(.fp-home-class-grid,.fp-class-photo-grid) .fp-motorcycle-photo{--fp-vehicle-midpoint:-44.2%}
  .fp-site :is(.fp-home-class-grid,.fp-class-photo-grid) .fp-trailer-photo{--fp-vehicle-midpoint:-51.3%}
  .fp-site :is(.fp-home-class-grid,.fp-class-photo-grid) .fp-lkw-photo{--fp-vehicle-midpoint:-50.3%}
  .fp-site :is(.fp-home-class-grid,.fp-class-photo-grid) :is(.fp-trailer-motif,.fp-trailer-card .fp-premium-motif)::after{top:-32px;bottom:auto;transform:translate(-50%,-51.3%)}
  /* A soft white backdrop prevents multiply-blended photos from carrying the
     card's hard paper edge through their bodywork. Keep only small dividers
     between neighbouring cards, outside the vehicle silhouettes. */
  .fp-home .fp-home-class-grid{border-top-color:transparent}
  .fp-home .fp-home-class-grid>.fp-home-class{background:radial-gradient(ellipse 75% 112px at 50% 0,#fff 70%,transparent 100%),var(--paper)}
  .fp-home .fp-home-class-grid>.fp-home-class+.fp-home-class::before{content:"";position:absolute;left:-10px;top:-1px;width:20px;height:1px;background:linear-gradient(90deg,transparent,rgb(0 0 0 / .08),transparent);pointer-events:none}
  .fp-site #klassen .fp-class-photo-grid>:is(.fp-car-card,.fp-motorcycle-card,.fp-trailer-card,.fp-lkw-card){background:radial-gradient(ellipse 75% 160px at 50% 0,#fff 70%,transparent 100%),var(--paper)}
}
@media(min-width:721px) and (max-width:1280px){
  /* The car has more empty canvas than the motorcycle. Give its column
     enough width to match the visible silhouettes without cropping or
     pushing the car outside the page on portrait tablets. */
  .fp-home .fp-home-class-grid{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr))}
  .fp-home .fp-home-class-grid>.fp-lkw-choice{border-top-color:transparent}
  .fp-home .fp-home-class-grid>.fp-home-class.fp-lkw-choice::before{content:none}
}
/* Large tablets in landscape use the four-column layout. Keep the same
   car/motorcycle balance here; wide desktop and phone layouts stay intact. */
@media(min-width:1281px) and (max-width:1439px){
  .fp-home .fp-home-class-grid{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)) minmax(0,2fr)}
}
/* The separate class overview already has wide car/motorcycle cards.
   Scale the motorcycle with their inner width until both photos reach
   their established 450/280px caps. Leave other motorcycle views alone. */
@media(min-width:721px) and (max-width:1439px){
  .fp-site #klassen .fp-class-photo-grid .fp-motorcycle-card .fp-motorcycle-photo{width:min(62.5%,280px)}
}