/* =====================================================================
   embed-liste.css – Inhalt der Location-Seite und der zentralen Ansicht:
   Liste nach Monaten (js/oeffentlich/termin-liste.js) und der Rahmen um
   Liste und Kalender (js/oeffentlich/ansicht.js). Baut auf basis.css,
   embed.css (Karte .ev, Zustände) und embed-kopf.css (Kopf) auf.

     <div class="e-inhalt">
       <div class="ev-bereich">            ← Liste
         <p class="lade-hinweis">…</p>     ← über altem Inhalt (Filterwechsel)
         <div class="zustand">…</div>      ← Laden bzw. Fehler ohne Inhalt
         <div class="ev-monate"><div class="ev-monat"><h2>…</h2><ul class="ev-liste">…</ul></div>…</div>
         <p class="ev-leer">  <div class="ev-weiter">  <p class="ev-ende">
       </div>
       <div class="e-kalender">…</div>     ← Kalender (kalender.css)
     </div>

   Für die automatische Höhe im iframe liegt alles im Fluss: kein
   position, keine festen Höhen, keine Einheiten der Fensterhöhe, keine
   Übergänge. Ein Inhalt mit aria-busy bleibt voll lesbar (kein Abblenden).

   Farben laufen über das Design der Einbettung (embed.css, Abschnitt 2).
   Die aufklappbaren Kalenderkarten stehen in embed.css (Abschnitt 7) –
   das Wochen-Widget nutzt sie auch.

   Inhalt:
     1. Rahmen um Liste und Kalender
     2. Monate und Einträge
     3. Weitere, Ende, leer
   ===================================================================== */


/* =====================================================================
   1. RAHMEN UM LISTE UND KALENDER
   ===================================================================== */
.e-inhalt,
.e-kalender {
  min-width: 0;
}

.ev-bereich {
  display: grid;
  gap: var(--abstand-5);
  min-width: 0;
}

/* Ladehinweis über altem Inhalt: eine ruhige Zeile, kein Overlay */
.ev-lade-hinweis {
  margin: 0;
}


/* =====================================================================
   2. MONATE UND EINTRÄGE
   Monatsüberschrift (h2, Fokusziel nach „Weitere“), darunter die
   Veranstaltungen als Karten untereinander.
   ===================================================================== */
.ev-monate {
  display: grid;
  gap: var(--abstand-6);
  min-width: 0;
}

.ev-monat {
  min-width: 0;
}

.ev-monat-titel {
  margin: 0 0 var(--abstand-3);
  padding-bottom: var(--abstand-1);
  border-bottom: 2px solid var(--farbe-rahmen);
  font-size: 1.1875rem;
}

/* Fokus per Skript (S16): Rahmen nah an der Überschrift */
.ev-monat-titel:focus-visible,
.ev-ende:focus-visible,
.ev-leer:focus-visible {
  outline-offset: 4px;
}

/* role="list" steht im HTML: Safari/VoiceOver nimmt Listen ohne
   Aufzählungszeichen sonst die Listen-Semantik */
.ev-liste {
  display: grid;
  gap: var(--abstand-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-liste > li {
  min-width: 0;
}


/* =====================================================================
   3. WEITERE, ENDE, LEER
   Der Knopf bricht um, statt bei schmalen Rahmen hinauszuragen.
   ===================================================================== */
.ev-weiter {
  display: grid;
  justify-items: start;
  gap: var(--abstand-2);
  min-width: 0;
}

.ev-weiter-fehler {
  margin: 0;
}

.ev-weiter-knopf {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.ev-ende,
.ev-leer {
  margin: 0;
  color: var(--farbe-text-leise);
}

/* Leer: wie die übrigen Zustände mittig, mit Luft */
.ev-leer {
  padding: var(--abstand-5) var(--abstand-3);
  text-align: center;
}