/* LEO — Knopf unten rechts, Chatfenster darueber.
   Farben aus bmsw_lp-base.css (--accent, --muted, --marker …). */

.leo {
  position: fixed; right: 16px; bottom: 16px; z-index: 1000;
  font-size: 15px; line-height: 1.45;
}

/* --- Knopf ---------------------------------------------------------------- */
.leo-knopf {
  /* Eigene weisse Flaeche: der Loewe ist freigestellt, ohne sie schiene der
     Seitentext um ihn herum durch. */
  position: relative; display: block; width: 88px; height: 88px; padding: 0;
  border: 1px solid var(--rule-light, #d4d4d4); border-radius: 16px;
  background: var(--card, #fff); cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.leo-knopf:hover, .leo-knopf:focus-visible {
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .24);
}
.leo-knopf:focus-visible { outline: 3px solid var(--marker, #00407C); outline-offset: 3px; }
.leo-bild {
  /* Freigestellte Figur: keine abgerundeten Ecken, sie schnitten den
     Schwanz an. Der Schatten folgt dem Umriss des Loewen. */
  position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px);
  transition: opacity .12s ease;
}
.leo-aktiv { opacity: 0; }
.leo-knopf:hover .leo-ruhe, .leo-knopf:focus-visible .leo-ruhe,
.leo-offen .leo-ruhe { opacity: 0; }
.leo-knopf:hover .leo-aktiv, .leo-knopf:focus-visible .leo-aktiv,
.leo-offen .leo-aktiv { opacity: 1; }

/* Ohne Bilddateien: runder Knopf mit dem Namen. */
.leo-ersatz { display: none; }
.leo-ohne-bild .leo-bild { display: none; }
.leo-ohne-bild .leo-ersatz {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 18px;
  background: var(--accent, #A5282E); color: #fff;
  font-weight: bold; font-size: 20px; letter-spacing: .04em;
}

/* --- Blase "Frag LEO!" ---------------------------------------------------- */
.leo-blase {
  position: absolute; right: 6px; bottom: calc(100% + 10px);
  padding: 6px 12px; white-space: nowrap; font-weight: bold;
  color: #fff; background: var(--accent, #A5282E); border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
.leo-blase::after {
  content: ""; position: absolute; right: 22px; top: 100%;
  border: 7px solid transparent; border-top-color: var(--accent, #A5282E);
}
.leo:not(.leo-offen) .leo-knopf:hover + .leo-blase,
.leo:not(.leo-offen) .leo-knopf:focus-visible + .leo-blase { opacity: 1; transform: none; }

/* --- Fenster -------------------------------------------------------------- */
.leo-fenster {
  position: absolute; right: 0; bottom: calc(100% + 12px);
  width: min(400px, calc(100vw - 32px));
  max-height: min(72vh, 600px);
  display: flex; flex-direction: column;
  background: var(--card, #fff); color: var(--fg, #252527);
  border: 1px solid var(--rule-light, #d4d4d4); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.leo-fenster[hidden], .leo[hidden] { display: none; }

/* --- x zum Ausblenden: oben links an der Karte ---------------------------- */
.leo-weg {
  position: absolute; left: -8px; top: -8px; z-index: 1;
  width: 24px; height: 24px; padding: 0; font-size: 16px; line-height: 22px;
  color: var(--fg, #252527); background: var(--card, #fff); cursor: pointer;
  border: 1px solid var(--rule-light, #d4d4d4); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
  opacity: 0; transition: opacity .12s ease;
}
.leo:hover .leo-weg, .leo-weg:focus-visible { opacity: 1; }
.leo-offen .leo-weg { display: none; }
/* Auf Touch-Geraeten gibt es kein Darueberfahren: das x bleibt sichtbar.
   Dann sitzt es aber weiter weg von der Figur - bei -8px klebte es ueber
   ihrer Ecke, und ein danebengesetzter Tipp traf statt LEO das x
   (Marc, 20.09.2026: «der ist teils ploetzlich abgewaehlt gewesen»). */
@media (hover: none) { .leo-weg { opacity: 1; left: -16px; top: -16px; width: 28px; height: 28px; line-height: 26px; } }

.leo-notiz {
  position: fixed; right: 16px; bottom: 16px; z-index: 1001;
  max-width: min(360px, calc(100vw - 32px)); padding: 10px 14px;
  font-size: 14px; color: #fff; background: var(--fg, #252527);
  border-radius: 10px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.leo-notiz[hidden] { display: none; }
.leo-zurueck {
  font: inherit; font-weight: bold; color: #fff; background: transparent;
  border: 0; padding: 0; text-decoration: underline; cursor: pointer;
}

.leo-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px 10px 16px; color: #fff; background: var(--accent, #A5282E);
}
.leo-titel strong { display: block; font-size: 17px; letter-spacing: .04em; }
.leo-titel span { font-size: 13px; opacity: .9; }
.leo-zu {
  width: 32px; height: 32px; font-size: 22px; line-height: 1; cursor: pointer;
  color: #fff; background: transparent; border: 0; border-radius: 8px;
}
.leo-zu:hover, .leo-zu:focus-visible { background: rgba(255, 255, 255, .18); }

.leo-verlauf { flex: 1; overflow-y: auto; padding: 12px 16px; }
.leo-intro { margin: 0 0 12px; color: var(--muted, #6b6b6b); }
.leo-intro > p { margin: 0; }
.leo-mehr { margin-top: 4px; font-size: 13px; }
.leo-mehr summary { cursor: pointer; color: var(--accent, #A5282E); display: inline; }
.leo-mehr ul { margin: 6px 0 4px; padding-left: 1.2em; }
.leo-mehr li { margin-bottom: 3px; }
.leo-mehr p { margin: 0; }
.leo-mehr a { color: var(--accent, #A5282E); }
.leo-frage {
  margin: 12px 0 6px auto; max-width: 85%; width: fit-content;
  padding: 8px 12px; font-weight: bold;
  background: var(--highlight, #E1ECF2); border-radius: 12px 12px 2px 12px;
}
.leo-antwort {
  margin: 0 0 10px; padding: 10px 12px;
  background: var(--bg-soft, #f1f1f1); border-radius: 12px 12px 12px 2px;
}
.leo-text { margin: 0 0 8px; white-space: pre-line; }
.leo-antwort > .leo-text:last-child { margin-bottom: 0; }
.leo-marke { color: var(--accent, #A5282E); font-weight: bold; margin-left: 1px; }
.leo-belege { margin: 0; padding-left: 1.5em; }
.leo-belege li { margin: 0 0 8px; }
.leo-belege li::marker { color: var(--accent, #A5282E); font-weight: bold; }
.leo-zitat {
  margin: 0; padding: 2px 0 2px 10px; font-style: italic;
  border-left: 3px solid var(--marker, #00407C);
}
.leo-herkunft { margin: 4px 0 0 13px; font-size: .9em; }
.leo-herkunft-allein { margin-left: 0; }
.leo-wortlaut { font-size: .85em; margin-top: 2px; }
.leo-wortlaut summary { cursor: pointer; color: var(--muted, #6b6b6b); }
.leo-wortlaut .leo-zitat { margin-top: 4px; }
.leo-herkunft a, .leo-quellen-liste a { color: var(--accent, #A5282E); }
.leo-stand { color: var(--muted, #6b6b6b); }
.leo-warte { font-style: italic; }

.leo-fuss { padding: 10px 16px 12px; border-top: 1px solid var(--rule-light, #d4d4d4); }
.leo-form { display: flex; gap: 8px; align-items: stretch; }
.leo-feld {
  flex: 1; min-width: 0; resize: none; font: inherit; padding: 7px 10px;
  border: 1px solid var(--rule-light, #d4d4d4); border-radius: 8px;
}
.leo-feld:focus { outline: 2px solid var(--marker, #00407C); outline-offset: 0; }
.leo-senden {
  font: inherit; font-weight: bold; padding: 0 16px; cursor: pointer;
  color: #fff; background: var(--accent, #A5282E); border: 0; border-radius: 8px;
}
.leo-senden:disabled { opacity: .5; cursor: wait; }
.leo-klein { margin: 8px 0 0; font-size: 12px; color: var(--muted, #6b6b6b); }
.leo-quellen-liste { margin: 4px 0 0; padding-left: 1.2em; font-size: 13px; }
.leo-grundlagen { margin-top: 6px; font-size: 12px; }
.leo-wegweiser { margin: 4px 0 8px; }
.leo-wegweiser li { margin-bottom: 4px; }
.leo-seiten { font-weight: bold; }
.leo-wahl { margin: 4px 0 2px; }
.leo-wahl .leo-klein { margin: 0 0 4px; }
.leo-wahl-knopf {
  font: inherit; font-size: 12px; margin: 0 4px 4px 0; padding: 3px 8px; cursor: pointer;
  color: var(--accent, #A5282E); background: var(--card, #fff);
  border: 1px solid var(--accent, #A5282E); border-radius: 12px;
}
.leo-wahl-knopf:hover { background: var(--accent, #A5282E); color: #fff; }
.leo-grundlagen summary { cursor: pointer; color: var(--muted, #6b6b6b); }

/* Handy (LandingPage-Chat, 18.09.2026, Marc: «eine kleinere Version fuer das
   Handy»): Auf dem Telefon fuellt ein Tag des Wochenrasters die ganze Breite,
   ein 88-px-Knopf laege dauerhaft ueber den Lektionen. Er bleibt schwebend und
   wegklickbar, nur kleiner und naeher an der Ecke. */
@media (max-width: 620px) {
  .leo { right: 10px; bottom: 10px; }
  .leo-knopf { width: 56px; height: 56px; border-radius: 12px; }
  .leo-fenster { max-height: min(78vh, 600px); }
}
/* Aus dem Menue geoeffnet, obwohl der Knopf weggeklickt ist: nur das Fenster. */
.leo-nur-fenster .leo-knopf, .leo-nur-fenster .leo-blase, .leo-nur-fenster .leo-weg { display: none; }
@media (prefers-reduced-motion: reduce) {
  .leo-knopf, .leo-bild, .leo-blase { transition: none; }
}
@media print { .leo, .leo-notiz { display: none; } }

/* Zwei Varianten (18.09.2026): Kennzeichen der Antwortart und Passwortfeld */
.leo-art { margin: 0 0 4px; font-size: 11px; font-weight: bold; letter-spacing: .03em;
  text-transform: uppercase; color: var(--muted, #6b6b6b); }
.leo-pw-form { display: flex; gap: 6px; margin: 8px 0 4px; }
.leo-pw-form input { flex: 1; min-width: 0; font: inherit; padding: 6px 8px;
  border: 1px solid var(--rule-light, #d4d4d4); border-radius: 6px; }

/* E-Mail-Link mit Textvorlage (18.09.2026) */
.leo-text a, .leo-klein a { color: var(--accent, #A5282E); }