/* mapfit – was die Hilfe NUR hier hat: Bilder mit Lupe, der Kasten
 * „Damit könnte man …", das neunte Feld der Marke.
 *
 * Alles Übrige - Lesetext, Überschriften, Kästen, Tabellen, die eigene Seite,
 * die Leiste und ihr Griff - steht in gestaltung/hilfe.css, byte-identisch
 * mit dem System; dort nicht ändern.
 */
/* Die Zwischenüberschriften der Tastentabelle (erzeugt aus dem Tastenregister,
   scripts/tastentabelle.mjs, nach Gruppen sortiert) - gesetzt wie .menue-be
   der Kopfmenüs. Hier, weil nur mapfit eine Tabelle mit Gruppen hat. */
.hilfe-inhalt tr.tasten-gruppe th {
  padding-top: 22px; border-bottom: 0;
  font: 600 11px/1.6 system-ui, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.hilfe-inhalt tbody tr:first-child th { padding-top: 6px; }
/* Die Tastenspalte bricht nicht um („Strg + Umschalt + S" bleibt eine Zeile) -
   aber nur, wo Tasten stehen: Eine Beschreibung wie „Klick oder Rechtsklick
   auf einen Punkt" bricht um, statt in die zweite Spalte zu laufen. */
.hilfe-inhalt tr:not(.tasten-gruppe) td:first-child:has(kbd) { white-space: nowrap; }
.hilfe-inhalt tr:not(.tasten-gruppe) td:first-child:not(:has(kbd)) { min-width: 9em; max-width: 40%; }

/* Zusatz in einer Überschrift, leichter gesetzt als der Titel. */
.hilfe-inhalt .nebensache { font-weight: 400; color: var(--muted); font-size: 0.75em; }
/* Verborgene Kapitel gehören zu Schritten, die es (noch) nicht zu sehen gibt. */
.hilfe-inhalt [hidden] { display: none !important; }

.hilfe-inhalt figure { margin: 16px 0; padding: 0; }
.hilfe-inhalt figure img {
  display: block; max-width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: var(--rund-gross); background: var(--flaeche);
  cursor: pointer;   /* nicht zoom-in: zeichnet Chrome selbst, ohne Rand (grund.css) */
}
/* Ausschnitte der Spalte sind rund 390 px schmal - nicht auf Textbreite ziehen. */
.hilfe-inhalt figure.schmal img { max-width: 390px; }
.hilfe-inhalt figcaption { font-size: var(--gr-bedienung); color: var(--muted); margin-top: 6px; }

/* „Damit könnte man …" - der Kasten, der vom Bedienen zum Anwenden führt. */
.hilfe-inhalt .faelle {
  border: 1px solid var(--border); border-radius: var(--rund-karte); padding: 4px 16px 14px;
  margin: 20px 0;
}
.hilfe-inhalt .faelle h4 { margin: 14px 0 4px; font-size: 15px; }
.hilfe-inhalt .faelle p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
/* Das neunte Feld der Marke - nur mapfit hat es (siehe grund.css). */
body.hilfe-seite .marke-blatt { fill: var(--gruen); stroke: var(--gruen); }
/* Der Zusatz „· Hilfe" hinter dem Namen, leiser - nicht das .akzent-Feld,
   das trägt das Grün der Marke. */
body.hilfe-seite .brand > span:not(.akzent) { color: var(--tinte-leise); font-weight: 400; }
/* Die Marke im Urheberhinweis der Fußzeile. */
body.hilfe-seite .marke-link { color: var(--tinte-text); text-decoration: none; font-weight: 600; }
body.hilfe-seite .marke-link span { color: var(--gruen); }
/* Beim Überfahren hellt das Wort auf und behält seine Zweiteilung. */
body.hilfe-seite .marke-link:hover { color: #fff; }
body.hilfe-seite .marke-link:hover span { color: var(--gruen-hell); }

/* Druckbild: der Rest steht in gestaltung/hilfe.css; hier nur die eigenen
   Marken-Teile und die Bilder. */
@media print {
  body.hilfe-seite .brand > span:not(.akzent),
  body.hilfe-seite .marke-link { color: inherit; }
  /* Ein Bildschirmfoto in Originalgröße füllt gedruckt die halbe Seite. */
  .hilfe-inhalt figure img { max-width: 480px; }
}
/* In der Leiste zählt jeder Pixel - auch schmale Ausschnitte nehmen die
   volle Breite; zum Vergrößern gibt es die Lupe. */
#hilfe-panel .hilfe-inhalt figure.schmal img { max-width: 100%; }

/* --- Bild groß ----------------------------------------------------------- */

/* Ein Klick legt ein Bild in voller Größe über die Anwendung; ein weiterer
   räumt es weg. */
#hilfe-lupe {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(15, 18, 22, 0.82); cursor: pointer;
}
#hilfe-lupe[hidden] { display: none; }
#hilfe-lupe img {
  max-width: 96vw; max-height: 92vh; border-radius: var(--rund-gross); background: var(--flaeche);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}