/* ──────────────────────────────────────────────────────────────────────────
   MIND Seitenhilfe — Overlay
   Gehoert zu help.js + help_content.js. Bewusst eine eigene Datei und nicht
   Teil von style.css: so laesst sich die Hilfe komplett entfernen, indem man
   die drei Dateien loescht und die Einbindung in base.html zuruecknimmt.

   Die Schicht haengt an <body> (nicht im .card), weil .card & Co. per
   backdrop-filter einen Containing Block aufmachen — ein position:fixed
   Overlay darin saesse falsch. Gleiches Muster wie #nt-ms-pop.
   z-index 2000 liegt ueber Modal (1200) und Mobil-Nav (1100).

   Zwei Darstellungen (siehe help.js):
     .mh-uebersicht — alles auf einmal: Rahmen + Nummern an allen Feldern,
                      alle Texte in einer Leiste rechts. Die Seite bleibt
                      hell und bedienbar.
     .mh-schritte   — eine Karte nach der anderen, Rest abgedunkelt.
   ────────────────────────────────────────────────────────────────────────── */

.mh-root {
  position: fixed;
  inset: 0;
  z-index: 2000;
  font-family: var(--font-ui);
  overflow: hidden;           /* Nummern am Bildrand nicht ueberstehen lassen */
}

/* In der Uebersicht bleibt die Seite bedienbar: nur Leiste und Nummern
   fangen Klicks, alles andere geht durch. */
.mh-uebersicht                { pointer-events: none; }
.mh-uebersicht .mh-panel,
.mh-uebersicht .mh-badge      { pointer-events: auto; }

.mh-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mh-schritte .mh-canvas { cursor: pointer; }   /* Klick ins Leere schliesst */

/* ── Abdunklung: nur im Schrittmodus ───────────────────────────────────── */
.mh-dim { fill: rgba(4, 8, 18, 0.72); }
.mh-uebersicht .mh-dim { display: none; }

/* ── Rahmen um die erklaerten Felder ───────────────────────────────────── */
.mh-ring {
  fill: none;
  stroke: var(--accent, #5b9dff);
  stroke-width: 2;
  transition: stroke-opacity .15s ease, stroke-width .15s ease;
}
/* Alle Felder gleichzeitig: zurueckhaltend, damit die Seite lesbar bleibt. */
.mh-ring-sanft { stroke-opacity: .40; stroke-width: 1.5; stroke-dasharray: 5 4; }
/* Das gerade betrachtete Feld. */
.mh-ring-aktiv {
  stroke-opacity: 1; stroke-width: 2.5; stroke-dasharray: none;
  filter: drop-shadow(0 0 10px rgba(91,157,255,0.75));
}

.mh-arrow     { fill: none; stroke: var(--accent, #5b9dff); stroke-width: 2.5;
                stroke-linecap: round; marker-end: url(#mh-arrowhead); }
.mh-arrowhead { fill: var(--accent, #5b9dff); }

/* ══════════════════════════════════════════════════════════════════════════
   Nummern an den Feldern
   ══════════════════════════════════════════════════════════════════════════ */

.mh-badges { position: absolute; inset: 0; }

.mh-badge {
  position: absolute;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--accent, #5b9dff);
  color: #06101f;
  font-size: 11px; font-weight: 800; line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s ease, transform .15s ease;
}
.mh-badge:hover,
.mh-badge-aktiv {
  opacity: 1;
  transform: scale(1.18);
  box-shadow: 0 0 0 3px rgba(91,157,255,0.30), 0 2px 10px rgba(0,0,0,0.5);
}

/* ══════════════════════════════════════════════════════════════════════════
   Leiste mit allen Texten (Uebersicht)
   ══════════════════════════════════════════════════════════════════════════ */

.mh-panel {
  position: absolute;
  top: 14px; right: 14px; bottom: 14px;
  width: 370px;
  max-width: calc(100vw - 28px);
  display: flex;
  flex-direction: column;
  background: var(--glass-modal, rgba(8,14,28,0.94));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.6));
  color: var(--text-main, #e8edf8);
  overflow: hidden;
}

.mh-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px 8px;
}
.mh-panel-titel { font-size: 15px; font-weight: 700; min-width: 0; }
/* Bearbeiten + Schliessen sitzen rechts in der Kopfzeile — dort sind sie
   ohne Scrollen erreichbar, auch bei einer langen Liste. */
.mh-panel-werkzeuge { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.mh-panel-hint {
  padding: 0 14px 10px;
  font-size: 11.5px; line-height: 1.45;
  color: var(--text-muted, #8fa3c0);
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.07));
}

.mh-liste {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px 8px;
}

.mh-item {
  display: flex; gap: 10px;
  padding: 9px 8px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid transparent;
  cursor: default;
  transition: background .13s ease, border-color .13s ease;
}
.mh-item:hover,
.mh-item-aktiv {
  background: rgba(91,157,255,0.10);
  border-color: rgba(91,157,255,0.40);
}
.mh-item:focus-visible { outline: 2px solid var(--accent, #5b9dff); outline-offset: 1px; }

.mh-item-nr {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  border-radius: 10px;
  background: rgba(91,157,255,0.22);
  color: var(--accent-h, #7db4ff);
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
}
.mh-item-aktiv .mh-item-nr { background: var(--accent, #5b9dff); color: #06101f; }
/* Einleitung/Abschluss ohne Feld: Punkt statt Nummer, gedaempft. */
.mh-item-frei .mh-item-nr { background: none; color: var(--text-muted, #8fa3c0); }

.mh-item-body  { min-width: 0; }
.mh-item-titel { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.mh-item-text  { font-size: 12.5px; line-height: 1.5; opacity: .9; }
.mh-item-text p { margin: 0 0 6px; }
.mh-item-text p:last-child { margin-bottom: 0; }

.mh-panel-fuss {
  /* Flex statt text-align: die beiden Knoepfe werden in help.js ohne
     Leerzeichen aneinandergehaengt und klebten sonst zusammen. */
  display: flex; justify-content: center; align-items: center;
  gap: 8px; flex-wrap: wrap;
  padding: 9px 12px;
  border-top: 1px solid var(--border-soft, rgba(255,255,255,0.07));
}

/* ══════════════════════════════════════════════════════════════════════════
   Einzelkarte (Schrittmodus)
   ══════════════════════════════════════════════════════════════════════════ */

.mh-card {
  position: absolute;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--glass-modal, rgba(8,14,28,0.94));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,0.6));
  color: var(--text-main, #e8edf8);
  padding: 14px 16px 10px;
  transition: left .18s ease, top .18s ease;
  outline: none;
}
.mh-card:focus-visible { box-shadow: var(--shadow-lg), 0 0 0 2px var(--accent, #5b9dff); }

.mh-head  { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.mh-count { font-size: 11px; letter-spacing: .4px; text-transform: uppercase;
            color: var(--text-muted, #8fa3c0); font-weight: 600; }
.mh-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.mh-text  { font-size: 13px; line-height: 1.55; opacity: .92; }
.mh-text p { margin: 0 0 8px; }
.mh-text p:last-child { margin-bottom: 0; }

.mh-nav { display: flex; align-items: center; gap: 8px; margin: 12px 0 10px; }
.mh-keyhint { font-size: 11px; color: var(--text-muted, #8fa3c0); margin-top: 6px; text-align: right; }

/* Gemeinsame Textauszeichnung beider Darstellungen */
.mh-text code, .mh-item-text code {
  background: rgba(255,255,255,0.09); border-radius: 4px; padding: 1px 5px;
  font-family: "Consolas", "SF Mono", Menlo, monospace; font-size: .92em;
}
.mh-text strong, .mh-item-text strong { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   Knoepfe
   Alle Regeln tragen .mh-root davor. Grund: style.css setzt
   `body[data-layout="single"] button { background: var(--m-accent) … }` —
   Spezifitaet 0,1,1. Ein blosses .mh-x (0,1,0) verliert dagegen und der
   Schliessen-Knopf saehe aus wie ein blauer Aktionsbutton.
   ══════════════════════════════════════════════════════════════════════════ */

.mh-root .mh-x {
  background: none; border: none; color: var(--text-muted, #8fa3c0);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px;
  width: auto; margin: 0; box-shadow: none; transform: none;
}
.mh-root .mh-x:hover { color: var(--text-main, #e8edf8); background: none; transform: none; box-shadow: none; }

.mh-root .mh-nav button {
  width: auto; margin: 0; padding: 7px 15px; font-size: 13px; font-weight: 600;
  border-radius: var(--radius-sm, 8px); cursor: pointer; box-shadow: none; transform: none;
}
.mh-root .mh-prev {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.10));
  color: var(--text-main, #e8edf8);
}
.mh-root .mh-prev:hover:not(:disabled) { background: var(--glass-hover, rgba(255,255,255,0.14)); transform: none; box-shadow: none; }
.mh-root .mh-prev:disabled { opacity: .3; cursor: default; }
.mh-root .mh-next {
  background: var(--accent, #5b9dff);
  border: 1px solid var(--accent, #5b9dff);
  color: #06101f;
  margin-left: auto;
}
.mh-root .mh-next:hover { background: var(--accent-h, #7db4ff); transform: none; box-shadow: none; }

.mh-root .mh-modus {
  width: auto; margin: 0; padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.10));
  color: var(--text-muted, #8fa3c0);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer; box-shadow: none; transform: none;
}
.mh-root .mh-modus:hover {
  background: var(--glass-hover, rgba(255,255,255,0.12));
  color: var(--text-main, #e8edf8);
  transform: none; box-shadow: none;
}

/* "Texte bearbeiten" — braucht eine eigene Regel, sonst greift der globale
   `button { width: 100% }` samt Akzentfarbe und der Knopf laege als breiter
   blauer Balken unter der Fussleiste. Etwas praesenter als "Schritt fuer
   Schritt", aber kein Aktionsbutton: gespeichert wird er ja nicht. */
.mh-root .mh-edit {
  width: auto; margin: 0; padding: 4px 10px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: rgba(91,157,255,0.16);
  border: 1px solid rgba(91,157,255,0.45);
  color: var(--accent-h, #7db4ff);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer; box-shadow: none; transform: none;
}
/* Waehrend des Bearbeitens uebernimmt die Leiste unten (Speichern/Verwerfen);
   der Knopf oben waere dann nur noch verwirrend. */
.mh-bearbeiten .mh-edit { display: none; }
.mh-root .mh-edit:hover {
  background: rgba(91,157,255,0.26);
  color: #fff;
  transform: none; box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Schmale Bildschirme
   Unter 700px ist fuer Pfeile kein Platz und rechts keine Spalte frei: beide
   Darstellungen sitzen am unteren Rand. Der Pfeil wird in help.js
   abgeschaltet (nicht nur ausgeblendet, damit er nicht doch quer ueber den
   Bildschirm gerechnet wird); die Nummern an den Feldern bleiben.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .mh-panel {
    top: auto; left: 8px; right: 8px; bottom: 8px;
    width: auto; max-width: none;
    max-height: 58vh;
  }
  .mh-card {
    left: 8px !important; right: 8px; top: auto !important; bottom: 10px;
    width: auto; max-width: none;
    transition: none;
  }
  .mh-arrow { display: none; }
}

/* Kein Overlay im PDF — die Hilfe ist reine Bildschirmsache. */
@media print { .mh-root, .mh-help-btn { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .mh-card, .mh-ring, .mh-badge, .mh-item { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Texte bearbeiten
   Der Knopf "Texte bearbeiten" gibt Ueberschrift und Text der Zeilen per
   contenteditable frei. Sichtbar ist er nur fuer Rollenstufe 0/1 — help.js
   rendert ihn sonst gar nicht erst.
   ══════════════════════════════════════════════════════════════════════════ */

/* Leere Ueberschrift: normal weg, im Bearbeiten sichtbar (sonst liesse sich
   bei Einleitungszeilen keine nachtragen). */
.mh-item-titel.mh-leer { display: none; }
.mh-bearbeiten .mh-item-titel.mh-leer { display: block; }

/* Die Leiste erscheint erst mit der Freigabe. */
.mh-editleiste { display: none; }
.mh-bearbeiten .mh-editleiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px;
  border-top: 1px solid var(--border-soft, rgba(255,255,255,0.07));
  background: rgba(91,157,255,0.08);
}
.mh-bearbeiten .mh-panel-fuss { display: none; }

.mh-editstatus { flex: 1 1 140px; font-size: 11.5px; line-height: 1.4; color: var(--text-muted, #8fa3c0); }
.mh-editfehler { color: var(--danger, #f87171); font-weight: 600; }

.mh-root .mh-editleiste button {
  width: auto; margin: 0; padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm, 8px);
  cursor: pointer; box-shadow: none; transform: none;
}
.mh-root .mh-abbruch {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border-soft, rgba(255,255,255,0.10));
  color: var(--text-main, #e8edf8);
}
.mh-root .mh-abbruch:hover { background: var(--glass-hover, rgba(255,255,255,0.14)); transform: none; box-shadow: none; }
.mh-root .mh-speichern {
  background: var(--accent, #5b9dff);
  border: 1px solid var(--accent, #5b9dff);
  color: #06101f;
}
.mh-root .mh-speichern:hover { background: var(--accent-h, #7db4ff); transform: none; box-shadow: none; }
.mh-root .mh-speichern:disabled { opacity: .5; cursor: default; }
.mh-root .mh-modus:disabled { opacity: .35; cursor: default; }

/* Freigegebene Felder sichtbar machen — sonst raet man, wo man hineinklicken
   kann. */
.mh-bearbeiten [contenteditable="true"] {
  outline: none;
  border: 1px dashed rgba(91,157,255,0.45);
  border-radius: 6px;
  padding: 3px 6px;
  margin: 1px 0;
  background: rgba(255,255,255,0.03);
  cursor: text;
}
.mh-bearbeiten [contenteditable="true"]:focus {
  border-style: solid;
  border-color: var(--accent, #5b9dff);
  background: rgba(91,157,255,0.08);
}
/* Platzhalter fuer eine noch leere Ueberschrift. */
.mh-bearbeiten .mh-item-titel[contenteditable="true"]:empty::before {
  content: "Überschrift …";
  color: var(--text-muted, #8fa3c0);
  font-weight: 400;
}

/* Im Bearbeiten hebt die Maus keine Zeile mehr hervor — das taete sonst bei
   jeder Bewegung ueber den Text. */
.mh-bearbeiten .mh-item:hover { background: none; border-color: transparent; }
.mh-bearbeiten .mh-item-aktiv  { background: none; border-color: transparent; }

/* "Werkstext" setzt die Zeile auf den Stand aus help_content.js zurueck. */
.mh-item-werk { display: none; }
.mh-bearbeiten .mh-item-werk {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px; font-weight: 600;
  color: var(--text-muted, #8fa3c0);
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
}
.mh-bearbeiten .mh-item-werk:hover { color: var(--accent-h, #7db4ff); }

/* Auf schmalen Geraeten braucht die Leiste beim Schreiben mehr Hoehe. */
@media (max-width: 700px) {
  .mh-bearbeiten.mh-uebersicht .mh-panel { max-height: 78vh; }
}

/* Rueckmeldung nach dem Speichern, in der Hinweiszeile der Leiste. */
.mh-hint-ok { color: var(--success, #4ade80) !important; font-weight: 600; }