/* =====================================================================
   embed-kopf.css – Kopf der Location-Seite und der zentralen Ansicht:
   Anordnung von Umschalter „Liste | Kalender“, Location-Menü
   (js/oeffentlich/menue.js) und Filtern (js/oeffentlich/filter.js).
   Baut auf basis.css, embed.css und kalender.css (.umschalter) auf.

   Aufbau, den die Seite baut:
     <div class="e-kopf">
       <div class="umschalter" role="group" aria-label="Ansicht">…</div>
       <div class="lm">…</div>          ← Location-Seite
       <div class="e-filter">…</div>    ← zentrale Ansicht
     </div>

   Mobile first: Alles bricht um. Schmal stehen Umschalter und Menü bzw.
   Filter untereinander und linksbündig. Ab 36em Breite stehen Menü und
   Filter rechts (im iframe messen Media Queries die Breite des Rahmens).
   Für die automatische Höhe im iframe liegt alles im Fluss: kein
   position, keine festen Höhen, keine Übergänge beim Aufklappen. Farben
   laufen über das Design der Einbettung (embed.css, Abschnitt 2): Das
   Menü ist eine Fläche, Beschriftungen stehen auf dem Hintergrund.

   Inhalt:
     1. Kopfzeile
     2. Location-Menü: Knopf
     3. Location-Menü: Panel
     4. Filter
     5. Breiter Rahmen
     6. Kontrastmodus
   ===================================================================== */


/* =====================================================================
   1. KOPFZEILE
   Oben ausgerichtet: Klappt das Menü auf, bleibt der Umschalter stehen.
   ===================================================================== */
.e-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--abstand-3) var(--abstand-4);
  margin-bottom: var(--abstand-5);
}

.e-kopf > .umschalter {
  flex: 0 0 auto;
}

/* Sehr schmal (unter 16em, z. B. 200 px): Umschalter nur mit Text, so
   passt er ohne waagerechtes Scrollen. Die Werkzeugleiste des Kalenders
   wird dort in embed.css (Abschnitt 7) enger – auch im Wochen-Widget. */
@media (max-width: 15.99em) {
  .e-kopf .umschalter svg {
    display: none;
  }

  .e-kopf .umschalter button {
    padding-right: 10px;
    padding-left: 10px;
  }
}


/* =====================================================================
   2. LOCATION-MENÜ: KNOPF
   Beschriftung „Location“ und Knopf in einer Zeile, schmal umbrechend.
   Lange Namen brechen im Knopf um. Der Pfeil dreht sich ohne Übergang.
   ===================================================================== */
.lm {
  flex: 1 1 auto;
  min-width: 0;
}

.lm-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1) var(--abstand-2);
}

.lm-beschriftung {
  font-weight: 600;
}

.lm-knopf {
  justify-content: flex-start;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

.lm .loc-punkt {
  flex-shrink: 0;
}

.lm-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lm-knopf[aria-expanded="true"] .lm-pfeil {
  transform: rotate(180deg);
}


/* =====================================================================
   3. LOCATION-MENÜ: PANEL
   Im Fluss unter dem Knopf: Es schiebt den Inhalt nach unten und wird
   so auch im Lade-, Leer- und Fehlerzustand nie vom iframe abgeschnitten.
   width: 0 mit min-width: 100% – das Panel verbreitert .lm nicht. Beim
   Öffnen ändert sich also nicht, ob das Menü neben den Umschalter passt.
   ===================================================================== */
.lm-panel {
  width: 0;
  min-width: 100%;
  margin-top: var(--abstand-2);
  padding: var(--abstand-2);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche);
}

.lm-hinweis {
  margin: 0 0 var(--abstand-1);
  padding: var(--abstand-1) var(--abstand-3);
}

.lm-liste {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lm-link,
.lm-aktuell {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: var(--tippziel);
  padding: var(--abstand-2) var(--abstand-3);
  border-radius: var(--radius-klein);
  color: var(--farbe-text);
}

/* Links sind um Haken und Abstand eingerückt: Alle Namen stehen
   untereinander */
.lm-link {
  padding-left: calc(var(--abstand-3) + 20px + var(--abstand-2));
  text-decoration: none;
}

.lm-link:hover {
  background: var(--farbe-flaeche-gedaempft);
  color: var(--farbe-text);
  text-decoration: underline;
}

/* Aktuell angezeigt: Haken und fette Schrift. Der durchsichtige Umriss
   wird im Kontrastmodus sichtbar. */
.lm-aktuell {
  outline: 1px solid transparent;
  outline-offset: -1px;
  background: var(--farbe-flaeche-gedaempft);
  font-weight: 700;
}

.lm-haken {
  width: 20px;
  height: 20px;
}


/* =====================================================================
   4. FILTER
   Beschriftung links vom Feld; schmal untereinander, die Felder bündig
   (gleich breite Beschriftungen). Wird es noch enger, steht die
   Beschriftung über dem Feld.
   ===================================================================== */
.e-filter {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--abstand-3) var(--abstand-4);
  min-width: 0;
}

.e-feld {
  display: flex;
  flex: 1 1 15rem;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-1) var(--abstand-2);
  min-width: 0;
  max-width: 22rem;
}

.e-feld label {
  min-width: 5.5rem;
  font-weight: 600;
}

.e-feld select {
  flex: 1 1 9rem;
  width: auto;
  min-width: 0;
}


/* =====================================================================
   5. BREITER RAHMEN
   Menü und Filter rechts; das Panel rechtsbündig unter dem Knopf.
   ===================================================================== */
@media (min-width: 36em) {
  .lm-zeile,
  .e-filter {
    justify-content: flex-end;
  }

  .lm-panel {
    min-width: min(100%, 22rem);
    margin-left: auto;
  }
}


/* =====================================================================
   6. KONTRASTMODUS
   Der Punkt behält seine Farbe (basis.css). Der aktuelle Eintrag ist
   durch Haken, Schrift und den nun sichtbaren Umriss erkennbar.
   ===================================================================== */
@media (forced-colors: active) {
  .lm-aktuell {
    outline-color: CanvasText;
  }
}