/* help.css — In-App-Hilfe (Baustein-Standard): ?-Panel + i-Tooltips, dazu die
   eine Grundregel für [hidden] (siehe unten).
   ZENTRALE MECHANIK — identisch in jedem Baustein, wird über
   Bausteine/verteilen.py verteilt. Enthält KEINE baustein-eigenen Farben:
   alle Farben ausschließlich über die --bs-*-Variablen aus theme.css, damit
   hell/dunkel und Kunden-Branding automatisch mitgehen. */

/* ---- Grundregel: [hidden] versteckt wirklich (Todo 433/435) -------------
   Das Seiten-CSS der Bausteine setzt display auf Klassen (label.feld
   { display:grid }, .btn, .badge, form.formular) und schlägt damit das
   UA-Default für [hidden] — als hidden markierte Elemente blieben sichtbar.
   In kurse standen dadurch das Kennzeichen „abgesagt“ neben dem Absagen-Knopf
   eines LAUFENDEN Kurses, die Drop-in-Felder „Termin wählen“/„Datum“/
   „Kapazität“ bei einem Serienkurs und „Abbrechen“ in den Stammdaten ohne
   laufende Bearbeitung. Die Regel gehört hierher und nicht in jedes Seiten-CSS:
   help.css lädt jede Seite jedes Bausteins, und !important gewinnt unabhängig
   von der Reihenfolge der Stylesheets. Deckt den ?-Knopf mit ab, der vor
   help.js noch hidden ist. */
[hidden] { display: none !important; }

/* ---- Panel ------------------------------------------------------------- */
.hilfe-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
  z-index: 900;
}
.hilfe-backdrop.offen { opacity: 1; visibility: visible; }

.hilfe-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(380px, 92vw);
  background: var(--bs-bg); color: var(--bs-text);
  border-left: 1px solid var(--bs-border); box-shadow: -4px 0 24px rgba(0,0,0,.18);
  transform: translateX(100%); transition: transform .22s ease;
  z-index: 1000; display: flex; flex-direction: column;
}
.hilfe-panel.offen { transform: translateX(0); }

.hilfe-panel-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; border-bottom: 1px solid var(--bs-border);
  background: var(--bs-primary); color: var(--bs-on-primary);
}
.hilfe-panel-kopf h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.hilfe-schliessen {
  background: none; border: 1px solid rgba(255,255,255,.4); border-radius: 6px;
  color: var(--bs-on-primary); cursor: pointer; font-size: 1.1rem; line-height: 1;
  padding: .1rem .45rem;
}
.hilfe-schliessen:hover { border-color: var(--bs-on-primary); }

.hilfe-panel-inhalt { padding: 1rem 1.1rem; overflow-y: auto; font-size: .93rem; line-height: 1.55; }
.hilfe-panel-inhalt h1 { font-size: 1.15rem; margin: .2rem 0 .7rem; color: var(--bs-primary-text, var(--bs-primary)); }
.hilfe-panel-inhalt h2 { font-size: 1.02rem; margin: 1.1rem 0 .5rem; color: var(--bs-primary-text, var(--bs-primary)); }
.hilfe-panel-inhalt h3 { font-size: .95rem; margin: .9rem 0 .4rem; }
.hilfe-panel-inhalt p { margin: .5rem 0; }
.hilfe-panel-inhalt ul { margin: .5rem 0; padding-left: 1.3rem; }
.hilfe-panel-inhalt li { margin: .25rem 0; }
.hilfe-panel-inhalt code {
  background: var(--bs-primary-hell); padding: .05rem .3rem; border-radius: 4px;
  font-size: .88em;
}
.hilfe-panel-inhalt a { color: var(--bs-primary-text, var(--bs-primary)); }

/* ---- i-Tooltip --------------------------------------------------------- */
.hilfe-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; margin-left: .3rem; vertical-align: middle;
  border: 1px solid var(--bs-primary-text, var(--bs-primary)); border-radius: 50%;
  color: var(--bs-primary-text, var(--bs-primary)); background: var(--bs-bg);
  font-size: .72rem; font-weight: 700; font-style: normal; line-height: 1;
  cursor: help; user-select: none;
}
.hilfe-i:hover, .hilfe-i:focus { background: var(--bs-primary); color: var(--bs-on-primary); outline: none; }

.hilfe-tip {
  position: absolute; z-index: 1100; max-width: 240px;
  background: var(--bs-text); color: var(--bs-bg);
  padding: .45rem .6rem; border-radius: 6px; font-size: .82rem; line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); pointer-events: none;
}

/* ---- Leerzustand (Todo 350) -------------------------------------------
   Ersetzt den grauen „Noch keine …“-Halbsatz durch einen einladenden Block:
   Emoji-Icon + Titel + Hilfesatz + optionaler Aktionsknopf, der zum Anlege-
   Formular springt (siehe help.js, .leerzustand-cta[data-fokus]).
   Reine Mechanik/Optik — Emoji und Texte liefert der jeweilige Baustein
   (Schicht 2). Nur --bs-*-Variablen, damit hell/dunkel + Branding mitgehen. */
.leerzustand {
  text-align: center;
  padding: 2rem 1.25rem 2.25rem;
  border: 1px dashed var(--bs-border);
  border-radius: 10px;
  background: var(--bs-bg-alt);
  color: var(--bs-muted);
}
.leerzustand-icon { font-size: 2.4rem; line-height: 1; margin-bottom: .55rem; }
.leerzustand-titel {
  margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 600; color: var(--bs-text);
}
.leerzustand-text { margin: 0 auto 1rem; max-width: 46ch; font-size: .92rem; line-height: 1.5; }
.leerzustand-cta {
  display: inline-block; border: 1px solid var(--bs-primary);
  background: var(--bs-primary); color: var(--bs-on-primary);
  border-radius: 6px; padding: .45rem .9rem; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.leerzustand-cta:hover { filter: brightness(1.08); }
.leerzustand-cta:focus-visible { outline: 2px solid var(--bs-primary-text, var(--bs-primary)); outline-offset: 2px; }

/* ---- Handy ------------------------------------------------------------- */
@media (max-width: 520px) {
  .hilfe-panel { width: 100vw; border-left: none; }
}