/* Gemeinsame Regeln für alle weiteren Logo-Guidelines. */
.mw-library { --library-start: 0px; --library-end: 0px; }
.mw-library .mw-logos__nav { z-index: 2; background: var(--mw-background-neutral-base); }
.mw-detail, .mw-misuse, .mw-example, .mw-menu {
  font-family: var(--mw-family-body);
  font-weight: var(--mw-weight-medium);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--mw-text-neutral-highlight);
}
:is(.mw-detail,.mw-misuse,.mw-example,.mw-menu) :is(h2,p) { margin: 0; }
:is(.mw-detail,.mw-misuse,.mw-example,.mw-menu) h2 {
  font-family: var(--mw-family-headline);
  font-weight: var(--mw-weight-semibold);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: var(--mw-letter-spacing-small);
  overflow-wrap: break-word;
}
:is(.mw-detail,.mw-misuse) :is(h2,p) { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.mw-detail {
  display: grid;
  gap: 64px;
  padding-block: 64px;
  scroll-margin-top: 24px;
}
.mw-detail__text { display: grid; align-content: center; gap: 48px; min-width: 0; }
.mw-detail__text p, .mw-misuse p { color: var(--mw-text-neutral-primary); overflow-wrap: break-word; }
.mw-detail__text p a { color: var(--mw-background-button-default); text-underline-offset: 3px; }
.mw-detail__art { min-width: 0; }
/* Die Karte gibt den Innenabstand vor; die eingebetteten Bildrundungen werden ausgeblendet. */
.mw-detail__diagram {
  min-height: 300px;
  display: flex;
  align-items: center;
  background: white;
  border-radius: var(--mw-radius-700);
  overflow: hidden;
}
.mw-detail__diagram img { display: block; width: 100%; height: auto; clip-path: inset(8.1% 0); }
.mw-colors { display: grid; gap: 32px; }
.mw-colors__card, .mw-partners__card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 278px;
  border-radius: var(--mw-radius-700);
  background: white;
  overflow: hidden;
}
.mw-colors__card--blue { background: var(--mw-background-button-default); }
.mw-colors__card--black { background: #000; }
.mw-colors__card img { display: block; width: 79%; height: auto; }
.mw-colors__card .mw-colors__icon { width: min(50%,168px); aspect-ratio: 1; }
.mw-partners { display: grid; gap: 16px; }
.mw-partners__card img { display: block; width: calc(100% - 48px); height: auto; }
.mw-example { display: grid; gap: 48px; padding-block: 32px 64px; }
.mw-example h2 { font-size: clamp(2.75rem, 4vw, 4.5rem); }
.mw-example__media { position: relative; z-index: 3; min-width: 0; aspect-ratio: 1103 / 1080; overflow: hidden; }
.mw-example__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.mw-menu__close {
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  border: 0;
  border-radius: 32px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--mw-background-button-default);
  color: white;
}
.mw-misuse { padding-block: 64px 96px; scroll-margin-top: 24px; }
.mw-misuse > .mw-wordmark__intro { max-width: 441px; margin-bottom: 64px; }
.mw-misuse__grid { display: grid; gap: 32px; }
.mw-misuse figure { display: grid; gap: 32px; margin: 0; min-width: 0; align-content: start; }
.mw-misuse img { display: block; width: 100%; height: auto; border-radius: var(--mw-radius-700); }
.mw-misuse figcaption { font-size: 1rem; overflow-wrap: break-word; }
.mw-skip { position: fixed; z-index: 20; top: 8px; left: 8px; transform: translateY(-150%); padding: 12px 20px; background: white; color: #2d23e8; font: 700 1rem var(--mw-family-body); }
.mw-skip:focus { transform: translateY(0); }
.mw-cover__menu { position: absolute; top: 20px; right: 20px; border: 0; padding: 0; width: 48px; height: 48px; background: none; cursor: pointer; }
.mw-cover__menu img { display: block; width: 100%; height: 100%; }
.mw-menu { width: min(560px,calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 32px; border: 0; border-radius: 32px; background: var(--mw-background-neutral-base); }
.mw-menu::backdrop { background: rgb(0 0 0 / 48%); }
.mw-menu__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.mw-menu nav { display: grid; gap: 8px; }
.mw-menu nav a { padding-block: 12px; color: var(--mw-text-neutral-highlight); text-decoration: none; font-weight: 700; }
body:has(.mw-menu[open]) { overflow: hidden; }
:is(.mw-detail,.mw-example,.mw-menu,.mw-cover) :is(a,button):focus-visible { outline: 3px solid #2d23e8; outline-offset: 5px; }
@media (min-width: 600px) and (max-width: 991px) {
  .mw-colors, .mw-misuse__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 992px) {
  .mw-library { --library-start: 353px; --library-end: clamp(82px, calc(-46px + 12.5vw),194px); }
  .mw-detail, .mw-misuse { font-size: clamp(1rem, calc(.583333rem + .555556vw),1.25rem); }
  :is(.mw-detail,.mw-misuse) h2 { font-size: clamp(2rem, calc(.333333rem + 2.222222vw),3rem); }
  .mw-detail {
    grid-template-columns: minmax(0,441fr) minmax(0,868fr);
    align-items: center;
    gap: clamp(32px,3.333333vw,64px);
    min-height: clamp(800px,56.25vw,1080px);
    padding-block: clamp(96px,8.333333vw,160px) 96px;
  }
  .mw-detail--colors { padding-block: 96px clamp(96px,8.333333vw,160px); }
  .mw-colors { grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(20px,1.666667vw,32px); }
  .mw-colors__card { min-height: 0; aspect-ratio: 419 / 359; }
  .mw-detail__diagram, .mw-partners__card { min-height: 398px; }
  .mw-partners__card img { width: calc(100% - 64px); }
  .mw-example {
    grid-template-columns: minmax(0,1103fr) minmax(0,439fr);
    gap: clamp(40px,4.166667vw,80px);
    align-items: center;
    margin-left: calc(-1 * var(--library-start));
    padding: 0 clamp(60px,5.364583vw,103px) 0 0;
  }
  .mw-example h2 { font-size: clamp(3rem,3.75vw,4.5rem); }
  .mw-misuse { padding-block: clamp(96px,8.333333vw,160px); }
  .mw-misuse__grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mw-cover__menu { top: 64px; right: var(--library-end,10.15625vw); width: 64px; height: 64px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .mw-library { --library-start: 236px; --library-end: 32px; }
  .mw-example { padding-right: 0; }
}
@media (max-width: 991px) {
  .mw-example { margin-inline: calc(-1 * clamp(20px, calc(5.0877px + 4.38596vw),50px)); }
  .mw-example h2 { padding-inline: clamp(20px, calc(5.0877px + 4.38596vw),50px); }
}