/* =====================================================================
   embed.css – öffentliche Ansichten, die per iframe auf den Websites der
   Locations und auf liebenwir-ol.de erscheinen. Baut auf basis.css auf;
   jede Embed-Seite lädt dazu ihre eigenen CSS-Dateien.

   Wichtig für die automatische Höhe im iframe (Höhe = Höhe des
   Dokuments, gemessen in oeffentlich/verbindung.js):
   - html und body bekommen KEINE Höhe wie 100% oder 100vh. Sonst meldet
     die Seite immer mindestens die Höhe des iframes und könnte nie
     kleiner werden. Auch sonst keine Einheiten vh, dvh, svh oder lvh.
   - Keine Popups, keine festen (position: fixed) oder klebenden
     (position: sticky) Elemente: Im automatisch hohen iframe lägen sie
     außerhalb des sichtbaren Bereichs der einbettenden Seite.
   - Aufklappende Teile stehen im Fluss, nie position: absolute –
     absolut positionierte Teile zählen nicht zur gemessenen Höhe.
   - Kein scrollbar-gutter: Er hinterließe neben dem Inhalt einen leeren
     Streifen. Gegen Pendeln an der Breitengrenze des Kalenders hilft
     dessen Hysterese (58,5 / 60rem).
   - Keine Animationen beim Aufklappen.

   Farben (Änderungsrunde 1): Jede Einbettung hat ein eigenes Design
   (public/shared/design.js). oeffentlich/design.js setzt die Farben als
   CSS-Variablen --e-… an <html> (CSSOM, kein Inline-Style im HTML). Hier
   stehen ihre Standardwerte (= die heutigen Farben aus basis.css), und
   .embed leitet daraus die Gestaltungswerte von basis.css ab – so laufen
   auch basis.css und kalender.css in den Einbettungen über das Design,
   während das Backend unverändert bleibt. Der Seitenhintergrund ist
   standardmäßig durchsichtig (die Website scheint durch); Karten,
   Kalendertage, Knöpfe, Menüs und Auswahlfelder behalten ihre Fläche.
   Status-Tags behalten ihre festen, eigenen Farben.

   Inhalt:
     1. Grundlage
     2. Farben (Design der Einbettung)
     3. Zustände (laden, Fehler, leer)
     4. Eine Veranstaltung (oeffentlich/karte.js)
     5. Details und Beschreibung
     6. Location-Marke
     7. Kalender: aufklappbare Karten und schmale Rahmen
   ===================================================================== */


/* =====================================================================
   1. GRUNDLAGE
   ===================================================================== */

/* Der Seitenhintergrund bleibt durchsichtig: Die Website scheint durch,
   außer das Design der Einbettung legt einen Hintergrund fest (.embed). */
html,
body {
  background: transparent;
}

/* Das Snippet der Website übernimmt die Höhe (lw-hallo): Dann braucht
   das iframe keine eigenen Scrollbalken. Ohne Snippet bleibt es
   scrollbar – das ist die Rückfallebene. Ist die Seite höher als
   MAX_HOEHE (mehr nimmt das Snippet nicht an), nimmt verbindung.js die
   Klasse wieder weg: Das iframe scrollt dann selbst. */
html.hoehe-automatisch {
  overflow: hidden;
}

/* Die Breite bestimmt das iframe der einbettenden Website. Hintergrund
   aus dem Design, standardmäßig durchsichtig. */
.embed {
  margin: 0;
  padding: var(--abstand-3);
  border-radius: var(--radius);
  background: var(--e-hintergrund);
  color: var(--e-text);
}

@media (min-width: 360px) {
  .embed {
    padding: var(--abstand-4);
  }
}

@media (min-width: 600px) {
  .embed {
    padding: var(--abstand-5);
  }
}


/* =====================================================================
   2. FARBEN (DESIGN DER EINBETTUNG)
   Standardwerte der Variablen --e-… (Namen und Standard wie DESIGN_FELDER
   in public/shared/design.js; tests/struktur.test.js hält beide gleich).
   Das Design überschreibt sie an <html> (style.setProperty).
   ===================================================================== */
:root {
  --e-hintergrund: transparent;
  --e-ueberschrift: var(--farbe-text);
  --e-text: var(--farbe-text);
  --e-nebentext: var(--farbe-text-leise);
  --e-flaeche: var(--farbe-flaeche);
  --e-flaeche-text: var(--farbe-text);
  --e-rahmen: var(--farbe-rahmen);
  --e-akzent: var(--farbe-akzent);
  --e-akzent-text: #ffffff;
}

/* Gestaltungswerte aus basis.css in den Einbettungen aus dem Design.
   Text gilt hier für den Hintergrund; auf Flächen (unten) „Text auf
   Karten“. Abgeleitete Töne (gedämpfte Flächen, vergangene Tage, Hover,
   Feldrahmen mit mindestens 3 : 1, dunkler und heller Akzent) mischt
   color-mix() aus dem Design. */
.embed {
  --farbe-text: var(--e-text);
  --farbe-text-leise: var(--e-nebentext);
  --farbe-flaeche: var(--e-flaeche);
  --farbe-flaeche-leise: color-mix(in srgb, var(--e-flaeche-text) 3%, var(--e-flaeche));
  --farbe-flaeche-gedaempft: color-mix(in srgb, var(--e-flaeche-text) 6%, var(--e-flaeche));
  --farbe-rahmen: var(--e-rahmen);
  --farbe-rahmen-feld: color-mix(in srgb, var(--e-flaeche-text) 55%, var(--e-flaeche));
  --farbe-akzent: var(--e-akzent);
  --farbe-akzent-dunkel: color-mix(in srgb, var(--e-akzent) 80%, #000000);
  --farbe-akzent-hell: color-mix(in srgb, var(--e-akzent) 8%, var(--e-flaeche));
  --farbe-fehler-hell: color-mix(in srgb, var(--farbe-fehler) 10%, var(--e-flaeche));
  --farbe-fokus: var(--e-text);
}

/* Flächen: Karten, Kalendertage, Umschalter, Menü, Auswahlfelder und
   Hinweise – Text darauf in „Text auf Karten“ */
.embed .ev,
.embed .kal-monat,
.embed .kal-wtag,
.embed .kal-tagesbereich,
.embed .umschalter,
.embed .lm-panel,
.embed select,
.embed option,
.embed .hinweis,
.embed .kal-muster-grau {
  --farbe-text: var(--e-flaeche-text);
  color: var(--farbe-text);
}

/* Fokusrahmen aus dem Design statt des festen Blaus aus basis.css (der
   Rahmen liegt neben dem Element, also auf dem Hintergrund bzw. der
   Website): dort in „Text“ (.embed oben), innerhalb von Karten,
   Kalendertagen, Tagesbereich, Menü und Hinweisen in „Text auf Karten“ –
   beide Paare prüft die Kontrastprüfung (mindestens 4,5 : 1). Auswahlfelder
   und Umschalter bleiben bei „Text“: Ihr Rahmen liegt außerhalb auf dem
   Hintergrund. Im Kontrastmodus setzt das System die Farbe. */
.embed .ev,
.embed .kal-monat,
.embed .kal-wtag,
.embed .kal-tagesbereich,
.embed .lm-panel,
.embed .hinweis {
  --farbe-fokus: var(--e-flaeche-text);
}

/* Ausgewählter Monatstag: Auswahl- und Fokusrahmen haben hier dieselbe
   Farbe („Text auf Karten“) – mit Fokus deshalb deutlich dicker. Im
   Kontrastmodus gilt der Block in kalender.css. */
@media not (forced-colors: active) {
  .embed .kal-tag[aria-selected="true"]:focus-visible {
    box-shadow: inset 0 0 0 6px var(--farbe-text);
  }
}

.embed option {
  background-color: var(--e-flaeche);
}

.embed h2 {
  color: var(--e-ueberschrift);
}

/* Gefüllte Akzent-Flächen: Knöpfe, heutiger Tag, gewählte Ansicht */
.embed .knopf,
.embed .knopf:hover {
  color: var(--e-akzent-text);
}

.embed .knopf-zweit,
.embed .knopf-zweit:hover {
  color: var(--farbe-akzent);
}

.embed .knopf[aria-disabled="true"],
.embed .knopf[aria-disabled="true"]:hover {
  color: var(--farbe-text-leise);
}

.embed .umschalter button[aria-pressed="true"] {
  background: var(--e-akzent);
  color: var(--e-akzent-text);
}

.embed .ist-heute .kal-tageszahl,
.embed .ist-heute .kal-tageszahl:hover,
.embed .kal-heute-marke {
  color: var(--e-akzent-text);
}

/* Fehler ohne eigene Fläche stehen auf dem Hintergrund (Text, nicht rot);
   „Verschoben vom …“ auf Karten in „Text auf Karten“ – das Status-Tag
   daneben behält seine Farbe */
.embed .zustand-fehler {
  color: var(--e-text);
}

.embed .ev-hinweis,
.embed .kal-karte-hinweis {
  color: var(--e-flaeche-text);
}

/* Kontrastmodus: gedrückte Umschalter wie in kalender.css in Highlight */
@media (forced-colors: active) {
  .embed .umschalter button[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
  }
}


/* =====================================================================
   3. ZUSTÄNDE
   .zustand (basis.css) für Laden, Fehler und leer; hier nur enger, weil
   der Rahmen auf der Website oft schmal ist. .lade-hinweis: Ladekreis
   und Text in einer Zeile, z. B. über altem Inhalt, der bis zur Antwort
   stehen bleibt.
   ===================================================================== */
.embed .zustand {
  padding: var(--abstand-5) var(--abstand-3);
}

.zustand h2 {
  margin: 0;
  font-size: 1.0625rem;
}

.lade-hinweis {
  display: flex;
  align-items: center;
  gap: var(--abstand-2);
  margin: 0;
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
}

.lade-hinweis .lade-kreis {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-width: 2px;
}


/* =====================================================================
   4. EINE VERANSTALTUNG
   <article class="ev">: Kopf (Termin mit Einlass, Titel, Status), Hinweis,
   Ort, Kategorien, Eintritt und Tickets, Beschreibung – in dieser
   Reihenfolge im DOM und auf dem Bildschirm.
   ===================================================================== */
.ev {
  display: grid;
  gap: var(--abstand-2);
  min-width: 0;
  padding: var(--abstand-3) var(--abstand-4);
  border: 1px solid var(--farbe-rahmen);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  overflow-wrap: anywhere;
}

.ev > * {
  margin: 0;
}

.ev-kopf {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
}

/* Termin in eigener Zeile über dem Titel */
.ev-termin {
  display: block;
  color: var(--farbe-text-leise);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ev-kopf .ev-termin {
  margin-bottom: 2px;
}

.ev-titel {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.ev-kopf .tag {
  vertical-align: 0.125em;
}

/* „Verschoben vom …“ – als Text, die Farbe ist nur Zusatz (in den
   Einbettungen „Text auf Karten“, Abschnitt 2) */
.ev-hinweis {
  color: var(--status-verschoben-text);
  font-size: 0.9375rem;
  font-weight: 600;
}

.ev-ort {
  font-size: 0.9375rem;
}

.ev-kategorien {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-tickets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-2) var(--abstand-3);
}

.ev-tickets .knopf svg {
  width: 16px;
  height: 16px;
}


/* =====================================================================
   5. DETAILS UND BESCHREIBUNG
   .ev-details: aufgeklapptes Panel der Kalenderkarten (Wochen-Widget,
   Kalender der Veranstaltungsseite) mit Einlass, Kategorien, Eintritt,
   Tickets und Beschreibung. Die Beschreibung bricht nur an eigenen
   Zeilenumbrüchen und an sehr langen Wörtern um – ohne line-clamp, ohne
   Animation.
   ===================================================================== */
.ev-details {
  display: grid;
  gap: var(--abstand-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ev-details > * {
  margin: 0;
}

.ev-keine {
  color: var(--farbe-text-leise);
  font-size: 0.9375rem;
}

.ev-einlass {
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ev-beschreibung {
  display: grid;
  justify-items: start;
  gap: var(--abstand-1);
  min-width: 0;
}

.ev-text {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* „Mehr anzeigen“: sieht aus wie ein Link, ist ein Knopf (aria-expanded).
   Durchsichtiger Rahmen: im Kontrastmodus sichtbar. */
.ev-mehr {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
  padding: 0 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  background: transparent;
  color: var(--farbe-akzent);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.ev-mehr:hover {
  color: var(--farbe-akzent-dunkel);
}


/* =====================================================================
   6. LOCATION-MARKE
   Punkt (Farbe als --loc), Kurzzeichen und Name. Die Farbe ist nie das
   einzige Merkmal.
   ===================================================================== */
.loc-marke .loc-punkt {
  vertical-align: -1px;
}

.loc-marke .loc-kurz {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}


/* =====================================================================
   7. KALENDER: AUFKLAPPBARE KARTEN UND SCHMALE RAHMEN
   gemeinsam/kalender.js mit details (alle Einbettungen mit Kalender):
   Pfeil rechts oben, offen nach oben gedreht, die Details mit Rahmen
   direkt darunter. Ohne Übergang; float statt position: absolute
   (aufklappende Teile bleiben im Fluss). Steht hier statt in
   kalender.css: Die bleibt ohne transform (K11, Dialoge im Backend).
   ===================================================================== */
.kal-karte-pfeil {
  float: right;
  width: 16px;
  height: 16px;
  margin-left: var(--abstand-1);
  color: var(--farbe-text-leise);
}

.kal-karte[aria-expanded="true"] {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

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

.kal-details:not([hidden]) {
  border: 1px solid var(--farbe-flaeche-gedaempft);
  border-top: 0;
  border-radius: 0 0 var(--radius-klein) var(--radius-klein);
}

/* Sehr schmal (unter 16em, z. B. 200 px): Die Werkzeugleiste des
   Kalenders (kalender.css: nowrap) wird enger – „Heute“ mit weniger
   Innenabstand und kleinere Abstände ergeben etwa 165 px; bei größerer
   Schrift (Zoom nur für Text) bricht sie um (F8). */
@media (max-width: 15.99em) {
  .embed .kal-navigation {
    flex-wrap: wrap;
    gap: 4px;
  }

  .embed .kal-heute {
    padding-right: 10px;
    padding-left: 10px;
  }
}