/* 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, die drei Kästen, Tabellen, die
 * eigene Seite mit Kopf und Fuß, die Leiste und ihr Griff - steht seit dem
 * 19.08.2026 in gestaltung/hilfe.css, byte-identisch mit dem System. Zwei
 * Werte sind dabei bewusst dem System gefolgt und nicht mapfit: Die Warnung
 * ist rot statt gelb (Gelb heißt in der Marke „dieser Modus läuft"), und
 * der Tipp trägt das Grün der Marke.
 */
/* Zusatz in einer Überschrift - etwa der Hinweis, wie ein verborgener Schritt
   hervorzuholen ist. Leichter gesetzt als der Titel, aber in derselben Zeile. */
.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: zoom-in;
}
/* Ausschnitte der Werkzeugspalte sind rund 390px schmal - auf Textbreite gezogen
   sähe man nur die Unschärfe. */
.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 als der Name. Nicht das
   .akzent-Feld treffen - 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 ganze Wort auf, behält aber seine Zweiteilung:
   „Misch" wird weiß, nur „feld" trägt weiter das Grün. */
body.hilfe-seite .marke-link:hover { color: #fff; }
body.hilfe-seite .marke-link:hover span { color: var(--gruen-hell); }

/* Der Rest des Druckbilds steht in gestaltung/hilfe.css - Kopf und Fuß
   dunkel auf Weiß, jedes Kapitel auf einer neuen Seite. Hier nur, was mapfit
   dazu hat: die beiden 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 ist auch ein schmaler Ausschnitt breit genug - hier zählt
   jeder Pixel, und angeklickt wird er ohnehin zum Vergrößern. */
#hilfe-panel .hilfe-inhalt figure.schmal img { max-width: 100%; }

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

/* Ein Kartenbild in einer 460px schmalen Leiste ist ein Fingernagel. Ein Klick
   legt es 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: zoom-out;
}
#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);
}