/* Sektion 01: Logos. Referenzbreiten: Mobile 340, Mini 1024, Wide ab 992.
   Figma Wide wurde bei 1920 px gezeichnet. Zwischenwerte sind fließend.
   Kein transform:scale: Text bleibt zugänglich, Inhalte bestimmen die Höhe. */
.mw-logos {
  --logos-heading: 2rem;
  --logos-subheading: 1.5rem;
  --logos-lead: 1.125rem;
  --logos-body: 1rem;
  --logos-caption-gap: var(--mw-space-500);
  --logos-intro-gap: var(--mw-space-500);
  --logos-card-height: clamp(300px, calc(232.2333px + 19.9313vw), 436.33px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: clamp(48px, calc(24.1404px + 7.01754vw), 96px)
    clamp(20px, calc(5.0877px + 4.38596vw), 50px)
    clamp(20px, calc(-17.7778px + 11.1111vw), 96px);
  color: var(--mw-text-neutral-highlight);
  font-family: var(--mw-family-body);
  font-weight: var(--mw-weight-medium);
  line-height: 1.5;
}
.mw-logos :is(h2,h3,p) { margin: 0; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.mw-logos :is(h2,h3) {
  font-family: var(--mw-family-headline);
  font-weight: var(--mw-weight-semibold);
  line-height: 1;
  letter-spacing: var(--mw-letter-spacing-small);
  overflow-wrap: break-word;
}
.mw-logos h2 { font-size: var(--logos-heading); }
.mw-logos h3 { font-size: var(--logos-subheading); }
.mw-logos__sidebar { display: none; }
.mw-logos__content { min-width: 0; display: grid; gap: var(--mw-space-1600); }
.mw-logos__intro { display: grid; gap: var(--logos-intro-gap); }
.mw-logos__intro p { font-size: var(--logos-lead); }
.mw-logos__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--mw-space-800); align-items: start; }
.mw-logos__card { min-width: 0; display: grid; gap: var(--mw-space-800); scroll-margin-top: 32px; }
.mw-logos__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--logos-card-height);
  border-radius: var(--mw-radius-700);
  background: var(--mw-background-neutral-default);
  overflow: hidden;
}
.mw-logos__visual img { display: block; flex: none; object-fit: contain; }
.mw-logos__wordmark { width: 100%; height: 100%; aspect-ratio: 889 / 314; }
.mw-logos__wordmark--claim { aspect-ratio: 2560 / 1323; }
.mw-logos__icon { width: min(205px, 70%); height: min(205px, 70%); }
.mw-logos__caption { display: grid; gap: var(--logos-caption-gap); }
.mw-logos__caption p { color: var(--mw-text-neutral-primary); font-size: var(--logos-body); overflow-wrap: break-word; }
@media (min-width: 992px) {
  .mw-logos {
    grid-template-columns: 255px minmax(0,1fr);
    column-gap: 48px;
    padding: 96px clamp(82px, calc(-46px + 12.5vw),194px) 96px 50px;
  }
  .mw-logos__sidebar { display: block; }
  .mw-logos__nav { position: sticky; top: 96px; display: grid; gap: var(--mw-space-600); font-size: .875rem; font-weight: var(--mw-weight-bold); }
  .mw-logos__nav :is(a,span) { color: #000; text-decoration: none; text-box-trim: trim-both; text-box-edge: cap alphabetic; }
  .mw-logos__nav [aria-current] { color: var(--mw-background-button-default); }
  .mw-logos__nav a:hover { color: var(--mw-background-button-default); }
  .mw-logos__nav a:focus-visible { outline: 2px solid var(--mw-background-button-default); outline-offset: 8px; border-radius: 2px; }
}
@media (min-width: 992px) {
  .mw-logos {
    --logos-heading: clamp(2rem, calc(.333333rem + 2.222222vw), 3rem);
    --logos-subheading: clamp(1.5rem, calc(.25rem + 1.666667vw), 2.25rem);
    --logos-lead: clamp(1.125rem, calc(.5rem + .833333vw), 1.5rem);
    --logos-body: clamp(1rem, calc(.583333rem + .555556vw), 1.25rem);
    --logos-caption-gap: clamp(20px, calc(1.666667vw), 32px);
    --logos-intro-gap: clamp(20px, calc(1.666667vw), 32px);
    padding-top: clamp(96px, calc(-10.666667px + 8.888889vw), 160px);
    padding-bottom: clamp(96px, calc(-10.666667px + 8.888889vw), 160px);
  }
  .mw-logos__nav { top: clamp(96px, calc(-10.666667px + 8.888889vw), 160px); font-size: clamp(.875rem, calc(.666667rem + .277778vw), 1rem); }
  .mw-logos__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mw-logos__visual { height: auto; aspect-ratio: 1; }
}
@media (max-width: 339px) {
  .mw-logos { padding-inline: 16px; }
  .mw-logos__visual { height: auto; aspect-ratio: 1; }
}

/* Kompakter Desktop: Platz für drei gut lesbare Karten schaffen. */
@media (min-width: 992px) and (max-width: 1199px) {
  .mw-logos { grid-template-columns: 180px minmax(0,1fr); column-gap: 24px; padding-inline: 32px; }
  .mw-logos__grid { gap: 24px; }
}