/* Rangliste „Meistgelesen" (meistgelesen.php).
   Je Artikel eine dezente Karte Ton in Ton mit dem Inhalts-Orange (#ffbb44),
   gleiche Farbwerte wie die Frage-Boxen (css/faq-boxen.css). Vorne der Rang,
   dahinter Vorschaubild und Text im Markup der übrigen Listen
   (.artikel-item/.artikel-thumb aus css/thumbnails.css).

   Barrierefreiheit: echte <ol>; die Zahl ist sichtbarer Text, davor ein nur
   für Screenreader hörbares „Platz", die Zahl hängt also nicht an list-style
   (das Safari/VoiceOver bei list-style:none verschluckt). Kontraste auf der
   Kartenfläche: Titel ~12:1, Teaser ~9:1, Rang-Ziffer ~4,6:1 (Großtext),
   weiße Ziffer im Kreis der ersten drei ~7,9:1. */

.mg-intro {
  margin: 0 0 14px;
  max-width: 60em;
}

.mg-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 66em;
}

.mg-eintrag {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(93, 80, 29, .3);
  border-radius: 6px;
}

.mg-rang {
  flex: 0 0 auto;
  min-width: 34px;
  font: bold 26px/34px "Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", "Verdana", sans-serif;
  color: #6b5b26;
  text-align: center;
}

.mg-top .mg-rang {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #5d501d;
  color: #fff;
  font-size: 18px;
}

.mg-eintrag .artikel-item {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.mg-titel {
  display: inline-block;
  font: bold 14px/1.35 "Lucida Grande", "Lucida Sans Unicode", "Bitstream Vera Sans", "Verdana", sans-serif;
  color: #000;
  text-decoration: none;
}

.mg-titel:hover {
  text-decoration: underline;
}

.mg-titel:focus-visible {
  outline: 2px solid #3b3212;
  outline-offset: 2px;
  border-radius: 2px;
}

.mg-meta {
  margin: 3px 0 0;
}

.mg-meta a:hover {
  text-decoration: underline;
}

.mg-teaser {
  margin: 5px 0 0;
  color: #3b3212;
}

.mg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 480px) {
  .mg-eintrag {
    gap: 8px;
    padding: 10px;
  }

  .mg-rang {
    min-width: 26px;
    font-size: 20px;
    line-height: 28px;
  }

  .mg-top .mg-rang {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }

  .mg-teaser {
    display: none;
  }
}