/* mf-hilfe.css — Hilfe-Modus (#851, Paket E5). Skript: js/mf-hilfe.js (window.MFHilfe), Texte: js/mf-hilfe-texte.js.
   Nur Theme-Tokens (tokens.css), keine harten Farben: Hell/Dunkel folgt von selbst. Alle Ebenen liegen über der App
   (z-index nahe Maximum), aber unter dem Melde-Werkzeug (mf-melden.css, 2147483000). */
.mfh-wurzel [hidden] { display: none !important; }
.mfh-wurzel { --mfh-schleier: var(--ui-scrim); }

/* Knopf: rund, 44 px, halbtransparent; Lage nur hier (unten rechts, links neben „Menü“, Nr. 926) */
body .mfh-knopf { position: fixed; z-index: var(--z-ecke, 20002); right: calc(var(--ecke-rand, 12px) + var(--ecke-menue-b, 6.5rem) + var(--sp-2)); bottom: calc(var(--ecke-rand, 12px) + env(safe-area-inset-bottom, 0px)); left: auto; top: auto; padding: 0; margin: 0; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
    font: 700 1.15rem/1 'Cinzel', serif; }   /* Aussehen: material.css (Rauchglas, #871) */
.mfh-knopf-zeichen::before { content: '?'; }
.mfh-knopf.mfh-solo { right: var(--ecke-rand, 12px); }   /* Seite ohne „Menü“: „?“ ganz rechts */
.mfh-knopf.mfh-aktiv { z-index: 2147482003; }   /* nur im Hilfe-Modus über der Fangschicht (✕ zum Beenden) */
.mfh-knopf.mfh-aktiv .mfh-knopf-zeichen::before { content: '\00d7'; font-size: 1.5rem; }

/* Hilfe-Modus: Fangschicht, Schleier mit Löchern, Rahmen, ?-Plättchen */
.mfh-ebene { position: fixed; inset: 0; z-index: 2147482000; touch-action: none; cursor: help; overscroll-behavior: none; }
.mfh-schleier { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.mfh-schleier path { fill: var(--mfh-schleier); }
.mfh-rahmen-host { position: absolute; inset: 0; pointer-events: none; }
.mfh-rahmen {
    position: absolute; box-sizing: border-box; border: 2px dashed var(--ui-chip-rand); border-radius: var(--rs);
    --sh-rand: 0 0 0 1px color-mix(in srgb, var(--bg) 70%, transparent); box-shadow: var(--sh-rand);
}
.mfh-rahmen-aktiv { border-style: solid; border-color: var(--glut); --sh-glut: 0 0 14px var(--glut-glow-weich), 0 0 0 1px color-mix(in srgb, var(--bg) 70%, transparent); box-shadow: var(--sh-glut); }
.mfh-plaettchen {
    position: absolute; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; text-align: center;
    font: 700 var(--fs-marke)/var(--lh-marke) sans-serif; color: var(--ui-prim-text); background: var(--ui-prim-bg); border: 1px solid var(--ui-chip-rand); pointer-events: none;
}

/* Sprechblase (Name + Text) und Tipp beim ersten Besuch: Pergament-Blatt mit schmalem Papierrand (Nr. 956, material.css: el-fenster + data-material), Tinte statt Hell-auf-Dunkel; Material und Farben nur von dort */
body :is(.mfh-blase, .mfh-tipp) { position: fixed; max-width: calc(100vw - 24px); }   /* body davor: .el-fenster (material.css, später geladen) setzt sonst position: relative */
.mfh-blase { z-index: 2147482001; }
body .mfh-tipp { z-index: calc(var(--z-ecke, 20002) + 1); padding: var(--sp-1) var(--sp-2); font: 600 var(--fs-sm)/1.35 'Cinzel', serif; cursor: pointer; }      /* Knopfschrift wie .el-neben (Nr. 1026: vorher Systemschrift) */
/* Spitze nach unten: der Tipp zeigt auf den ?-Knopf (mf-hilfe.js setzt --mfh-pfeil = Mitte des Knopfs, Nr. 1167) */
.mfh-tipp .mfh-spitze { position: absolute; left: var(--mfh-pfeil, 50%); top: 100%; width: 0; height: 0; margin-left: -8px; pointer-events: none;
    border: 8px solid transparent; border-top-color: var(--mfh-spitze-farbe, var(--mat-akzent)); border-bottom-width: 0; }
.mfh-tipp[data-richtung="links"] .mfh-spitze { left: 100%; top: 50%; margin: -8px 0 0; border: 8px solid transparent; border-left-color: var(--mfh-spitze-farbe, var(--mat-akzent)); border-right-width: 0; }
.mfh-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: calc(var(--sp-1) * -1) calc(var(--sp-1) * -1) 0 0; }
.mfh-name { font: 700 var(--fs-lg)/1.25 'Cinzel', serif; color: var(--mat-akzent); min-width: 0; }
.mfh-blase-zu {
    flex: 0 0 var(--tap); width: var(--tap); height: var(--tap); border: 0; background: none; cursor: pointer;
    color: var(--mat-leise); font: 400 1.5rem/1 sans-serif;
}
.mfh-blase-zu:hover, .mfh-blase-zu:focus-visible { color: var(--mat-akzent); }
.mfh-text { margin: 0; font-size: var(--fs-md); line-height: 1.45; color: var(--mat-text); }

@media (prefers-reduced-motion: reduce) { .mfh-knopf { transition: none; } }
@media print { .mfh-wurzel { display: none !important; } }