/* "Mehr anzeigen": natives <details class="mehr"><summary>...</summary>...</details>.
   Eingeklappt ist der Standard. Ist das <summary> leer, wechselt die Beschriftung
   per CSS zwischen "Details anzeigen" und "Details ausblenden". Eigene Texte:
   <summary><span class="mehr-zu">... anzeigen</span><span class="mehr-auf">... ausblenden</span></summary>. */
details.mehr { margin: 8px 0 0; }
details.mehr > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; margin-left: -10px; border-radius: 8px; cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--tanne); user-select: none; }
details.mehr > summary::-webkit-details-marker { display: none; }
details.mehr > summary::before { content: '\25B8'; font-size: 11px; transition: transform .15s ease; }
details.mehr[open] > summary::before { transform: rotate(90deg); }
details.mehr > summary:empty::after { content: 'Details anzeigen'; }
details.mehr[open] > summary:empty::after { content: 'Details ausblenden'; }
details.mehr > summary:hover { background: rgba(47,211,160,.10); }
details.mehr > summary:focus-visible { outline: 2px solid var(--tanne); outline-offset: 2px; }
details.mehr > :not(summary) { margin-top: 6px; }
details.mehr .mehr-auf { display: none; }
details.mehr[open] .mehr-auf { display: inline; }
details.mehr[open] .mehr-zu { display: none; }