/* ===========================================================================
   Abfall-ABC — Anpassungen am eingebundenen Widget
   ===========================================================================
   Nur auf Seiten laden, die das Widget einbinden. Das Widget zeigt sehr
   viele Eintraege; ohne diese Regeln sprengt die Trefferliste die Seite.

   Die Kennung #mm-abc steht in jedem Selektor doppelt. Das Widget legt
   beim Start ein eigenes <style> in den <head>, mit denselben Selektoren;
   bei gleichem Gewicht gewinnt das spaeter Geladene, und das ist immer
   das Widget. Die Doppelung gibt jeder Regel hier denselben Zuschlag, so
   dass sie das Widget schlaegt und die Rangfolge untereinander bleibt.
   =========================================================================== */

/* Kompakte Grundstufe fuer die Trefferliste: das Widget zeigt 99 Eintraege,
     jeder mit Entsorgungswegen und Hinweisen. Gilt nur hier, der uebrige
     Seitentext bleibt bei 17 px. */

main#content #mm-abc#mm-abc p,
  main#content #mm-abc#mm-abc li,
  main#content #mm-abc#mm-abc em,
  main#content #mm-abc#mm-abc span,
  main#content #mm-abc#mm-abc .abc-item-category,
  main#content #mm-abc#mm-abc .results-count {
    font-size: .68rem;
    line-height: 1.22;
  }

main#content #mm-abc#mm-abc h2.abc-item-title { font-size: .78rem; line-height: 1.3; }

main#content #mm-abc#mm-abc h3 { font-size: .72rem; line-height: 1.3; margin-bottom: .25rem; }

main#content #mm-abc#mm-abc .alphabet-btn { font-size: .68rem; }

/* Der versteckte Vorlesetext braucht keine Groesse, aber auch keine Hoehe */

main#content #mm-abc#mm-abc .sr-only { line-height: 1; }

#mm-abc#mm-abc .abc-item-title {
    font-size: 0.91rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
  }

#mm-abc#mm-abc .abc-item {
    background: #fff;
    border-radius: 16px;
    padding: 17px;
    margin-bottom: 8px;
    border: 1px solid #d2d7dd;
  }

#mm-abc#mm-abc .abc-item-disposal a.link-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--mm-primary);
    color: #fff !important;
    border-radius: 8px;
    font-size: .65rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
  }

#mm-abc#mm-abc .abc-item-disposal li {
    font-size: 0.70rem;
  }

#mm-abc#mm-abc .abc-item-disposal ul,
  #mm-abc#mm-abc .abc-item-disposal h3,
  #mm-abc#mm-abc .abc-item-disposal p,
  #mm-abc#mm-abc .abc-item-disposal div {
    font-size: 0.6rem;
  }

/* Vuetify bringt eine eigene Groessenangabe fuer die runden Knoepfe mit. */
#mm-abc#mm-abc .v-btn--icon.v-btn--size-default {
    --v-btn-size: 0.871rem;
  }
