/* DriveSolution – Bild + Text (editorial), geclippter Hover-Zoom. Abstände in em (Projektvorgabe). */

/* align-items:stretch -> das Bild ist genau so hoch wie die Textspalte (ausgewogene Proportion). */
.ds-mt{display:grid;grid-template-columns:1fr 1fr;gap:4.25em;align-items:stretch}
.ds-mt--right .ds-mt__media{order:2}
.ds-mt__media{display:flex}

.ds-mt__frame{position:relative;width:100%;min-height:340px;overflow:hidden;border:1px solid var(--ds-border);border-radius:var(--ds-r);background:var(--ds-surface)}
.ds-mt__frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.ds-mt:hover .ds-mt__frame img{transform:scale(1.05)}
.ds-mt__frame--4-3{aspect-ratio:4/3}
.ds-mt__frame--1-1{aspect-ratio:1/1}
.ds-mt__frame--3-4{aspect-ratio:3/4}
.ds-mt__frame--16-9{aspect-ratio:16/9}

.ds-mt__body .ds-kicker{display:inline-flex;align-items:center;gap:.72em}
.ds-mt__body .ds-shead__bar{margin:1em 0 1.2em}
.ds-mt__h{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.02}
.ds-mt__p{color:var(--ds-muted);font-size:1.06rem;line-height:1.65;margin-bottom:.94em;max-width:46ch}

.ds-mt__list{list-style:none;margin:1.6em 0 1.8em;padding:0;display:grid;gap:.75em}
.ds-mt__list li{display:flex;align-items:flex-start;gap:.74em;color:var(--ds-text);font-size:1.02rem}
.ds-mt__list .ds-ico{color:var(--ds-accent);width:20px;height:20px;flex:none;margin-top:.18em}

.ds-mt__more{display:inline-flex;align-items:center;gap:.6em;font-family:"Archivo",sans-serif;font-weight:700;
  font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;transition:gap .2s,color .2s}
.ds-mt__more .ds-ico{width:1.05em;height:1.05em}
.ds-mt__more:hover{gap:1.07em;color:var(--ds-accent)}

@media(max-width:900px){
  .ds-mt{grid-template-columns:1fr;gap:2.125em;align-items:start;min-width:0}
  .ds-mt--right .ds-mt__media{order:0}
  .ds-mt__frame{min-height:0;aspect-ratio:4/3;max-width:100%}
  .ds-mt__p{max-width:none}
  /* Grid-Items dürfen unter ihre Inhalts-min-width schrumpfen -> kein horizontaler Overflow (mobiles „Schwimmen") */
  .ds-mt > *{min-width:0}
  .ds-mt__h,.ds-mt__p{overflow-wrap:break-word}
}
@media(prefers-reduced-motion:reduce){
  .ds-mt:hover .ds-mt__frame img{transform:none}
}