/* ============================================================
   LeseMarken — Lesemarken/Notizen (Namespace .lkm).
   Eigenstaendige Komponente, kollisionsfrei zu .dtb/.lk-lm.
   Nutzt die base.css-Design-Token (var(--primary) etc.).
   Overlays (Popover/Editor) liegen an document.body -> eigene
   Token-Fallbacks, falls ausserhalb von .lk-lm gerendert.
   ============================================================ */

/* ---------- Mark im Fliesstext ---------- */
mark.lkm-hit {
  border-radius: 3px;
  padding: 0 1px;
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: filter .12s ease;
}
mark.lkm-hit:hover { filter: brightness(.95); }
mark.lkm-hit.lkm-has-note {
  border-bottom: 2px solid rgba(0, 0, 0, .35);
}
/* G1: KEIN runder Notiz-Punkt mehr hinter dem markierten Wort (sah aus wie ein
   list-style-Bullet). Notiz wird ausschliesslich ueber den Unterstrich
   (lkm-has-note) im Text und das Notiz-Flag in der Panel-Liste angezeigt. */

/* Inline-Icon vor der Marke (Fix 6) — in Markenfarbe */
.lkm-inline-icon {
  display: inline-block;
  width: 0.95em; height: 0.95em;
  margin-right: 2px;
  vertical-align: -0.12em;
}
.lkm-inline-icon svg { width: 100%; height: 100%; display: block; }

/* Element-/Bild-Marke ohne Text */
.lkm-anchored { outline: 2px dashed var(--primary, #0d6b6e); outline-offset: 3px; border-radius: 8px; }

/* Highlight-Puls beim Sprung */
@keyframes lkm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(13, 107, 110, .55); }
  100% { box-shadow: 0 0 0 14px rgba(13, 107, 110, 0); }
}
.lkm-pulse { animation: lkm-pulse .9s ease-out 1; border-radius: 3px; }

/* ---------- Figur-Add-Button ---------- */
figure[id] { position: relative; }
.lkm-fig-add {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  color: var(--primary, #0d6b6e);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  cursor: pointer; z-index: 4;
  transition: background .12s ease, transform .12s ease;
}
.lkm-fig-add:hover { background: #fff; transform: scale(1.06); }

/* ---------- Toolbar-Button (in .dtb eingehaengt) ---------- */
.lkm-toolbtn {
  position: relative;
  width: 30px; height: 30px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 7px;
  background: rgba(13, 107, 110, .10);
  color: var(--primary, #0d6b6e);
  cursor: pointer; margin-left: 4px;
  transition: background .12s ease;
}
.lkm-toolbtn:hover { background: rgba(13, 107, 110, .20); }
.lkm-toolbtn.is-on { background: var(--primary, #0d6b6e); color: #fff; }
.lkm-toolbtn-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--primary, #0d6b6e); /* Fix 1: kein Gold/Ocker */
  border-radius: 999px;
}

/* ---------- Popover ---------- */
.lkm-pop {
  position: fixed; z-index: 320;
  display: flex; gap: 3px;
  padding: 4px;
  background: #1f2733;
  border-radius: 9px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
.lkm-pop[hidden] { display: none; }
.lkm-pop::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: #1f2733;
}
.lkm-pop-btn {
  width: 34px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: transparent; color: #fff; cursor: pointer;
  transition: background .12s ease;
}
.lkm-pop-btn:hover { background: rgba(255, 255, 255, .16); }

/* ---------- Panel rechts ---------- */
.lkm-host { /* Marker: Panel-Anker (host = .lk-lm-Root) */ }
.lkm-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 340px; max-width: 92vw;
  display: flex; flex-direction: column;
  background: var(--paper, #fff);
  border-left: 1px solid var(--line, #e3e9f2);
  box-shadow: -8px 0 30px rgba(13, 38, 59, .14);
  z-index: 40;
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.lkm-panel[hidden] { display: none; }
.lkm-panel.open { transform: translateX(0); }

.lkm-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line, #e3e9f2);
  flex-shrink: 0;
}
.lkm-panel-title { font-weight: 700; font-size: 15px; color: var(--ink, #1f2733); }
.lkm-panel-count {
  font-size: 12px; font-weight: 700;
  color: var(--primary, #0d6b6e);
  background: rgba(13, 107, 110, .12);
  border-radius: 999px; padding: 1px 8px;
}
.lkm-panel-close {
  margin-left: auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-soft, #4a5568); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.lkm-panel-close:hover { background: var(--primary-soft, #e6f2f2); color: var(--primary, #0d6b6e); }

.lkm-panel-tools {
  display: flex; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--line, #e3e9f2);
  flex-shrink: 0;
}
.lkm-panel-q {
  flex: 1; min-width: 0;
  font: inherit; font-size: 13.5px; padding: 7px 10px;
  border: 1px solid var(--line, #e3e9f2); border-radius: 7px;
  background: var(--paper, #fff); color: var(--ink, #1f2733); outline: none;
}
.lkm-panel-q:focus { border-color: var(--primary, #0d6b6e); box-shadow: 0 0 0 3px var(--primary-soft, #e6f2f2); }
.lkm-panel-sort {
  font: inherit; font-size: 13px; padding: 7px 8px;
  border: 1px solid var(--line, #e3e9f2); border-radius: 7px;
  background: var(--paper, #fff); color: var(--ink-soft, #4a5568); cursor: pointer; outline: none;
}

.lkm-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
/* Fix 4: geerbtes Quadrat-Aufzaehlungszeichen (.lk-lm ul li::before {content:"▪"})
   in der Panel-Liste neutralisieren — kein list-style, kein Pseudo-Marker. */
.lkm-list li { list-style: none; padding-left: 0; position: relative; }
.lkm-list li::before { content: none !important; }
.lkm-item {
  position: relative;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 10px; margin-bottom: 3px; /* F3: kompaktere Liste (vorher 9px/4px) */
  border: 1px solid transparent; border-radius: 9px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.lkm-item:hover { background: var(--bg, #f6f8fb); border-color: var(--line, #e3e9f2); }
.lkm-item.is-active { background: var(--primary-soft, #e6f2f2); border-color: var(--primary, #0d6b6e); }
.lkm-item[data-status="missing"] { cursor: default; opacity: .72; }

.lkm-item-dot { flex-shrink: 0; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); }
.lkm-item-icon { flex-shrink: 0; color: var(--primary, #0d6b6e); margin-top: 1px; display: grid; place-items: center; }
.lkm-item-body { flex: 1; min-width: 0; }
.lkm-item-label { font-size: 13.5px; font-weight: 600; color: var(--ink, #1f2733); margin-bottom: 2px; }
/* M3: Notiz-Indikator im Titel — Lesezeichen mit Notiz erkennbar machen */
.lkm-item-noteflag {
  display: inline-grid; place-items: center; vertical-align: -0.18em;
  width: 0.92em; height: 0.92em; margin-left: 5px;
  color: var(--primary, #0d6b6e); opacity: .8;
}
.lkm-item-noteflag svg { width: 100%; height: 100%; }
.lkm-item-excerpt {
  font-size: 12.5px; color: var(--ink-soft, #4a5568); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lkm-item-note { color: var(--muted, #7a869a); font-style: italic; margin-top: 2px; }
.lkm-item-art { flex-shrink: 0; color: var(--primary, #0d6b6e); display: grid; place-items: center; margin-top: 1px; }

/* Fix 7: Hover-Aktionen klar abgesetzt — eigener Bereich, vom Inhalt getrennt */
.lkm-item-actions {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 2px;
  margin-left: 2px; margin-top: 1px;
  padding-left: 4px;
  border-left: 1px solid transparent;
}
.lkm-item:hover .lkm-item-actions { border-left-color: var(--line, #e3e9f2); }
.lkm-item-edit, .lkm-item-del {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--muted, #7a869a); cursor: pointer;
  opacity: 0; transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.lkm-item:hover .lkm-item-edit, .lkm-item:hover .lkm-item-del { opacity: 1; }
.lkm-item-edit:hover { background: var(--primary-soft, #e6f2f2); color: var(--primary, #0d6b6e); }
.lkm-item-del:hover { background: var(--red-soft, #fdecea); color: var(--red, #c0392b); }

.lkm-item-moved, .lkm-item-missing {
  display: inline-block; margin-top: 4px;
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
}
.lkm-item-moved { color: #8a5a00; background: #fbf0d6; }
.lkm-item-missing { color: var(--red, #c0392b); background: var(--red-soft, #fdecea); }

.lkm-empty { padding: 24px 16px; text-align: center; color: var(--muted, #7a869a); font-size: 13.5px; }

/* Inline-Lösch-Bestätigung */
.lkm-confirm {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, .96); border-radius: 9px;
  font-size: 13px; color: var(--ink, #1f2733); z-index: 2;
}
.lkm-confirm button { font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px; border: 1px solid var(--line, #e3e9f2); background: var(--paper, #fff); cursor: pointer; }
.lkm-confirm-yes { color: var(--red, #c0392b); border-color: #f0c5c0 !important; }
.lkm-confirm-yes:hover { background: var(--red-soft, #fdecea); }
.lkm-confirm-no:hover { border-color: var(--primary, #0d6b6e) !important; color: var(--primary, #0d6b6e); }

/* ---------- Editor ---------- */
.lkm-editor-ov {
  position: fixed; inset: 0; z-index: 340;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .55); padding: 20px;
}
.lkm-editor-ov[hidden] { display: none; }
/* H3: Dialog als Flex-Spalte mit begrenzter Hoehe — Header fix, Body scrollt,
   Footer (Buttons) klebt unten und bleibt IMMER sichtbar. Padding wandert vom
   Dialog auf Head/Body/Foot, damit der Scroll-Bereich sauber abschliesst. */
.lkm-editor {
  width: 100%; max-width: 540px; /* G3: breit genug fuer Swatches + Eigene Farbe */
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden; /* Kinder steuern den Scroll, nicht der Dialog selbst */
  background: var(--paper, #fff); color: var(--ink, #1f2733);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(13, 38, 59, .35);
}
/* Fix 13: Kopfzeile ist der Drag-Griff. H3: fix, schrumpft nicht. */
.lkm-editor-head {
  display: flex; align-items: center; flex-shrink: 0;
  padding: 18px 18px 14px; cursor: grab; user-select: none; touch-action: none;
}
.lkm-editor-head.is-grabbing { cursor: grabbing; }
.lkm-editor-title { font-size: 16px; font-weight: 700; }
.lkm-editor-x {
  margin-left: auto; width: 30px; height: 30px;
  display: grid; place-items: center; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-soft, #4a5568); cursor: pointer;
}
.lkm-editor-x:hover { background: var(--bg, #f6f8fb); color: var(--ink, #1f2733); }

/* H3: scrollbarer Inhaltsbereich zwischen Head und Foot. */
.lkm-editor-body {
  display: flex; flex-direction: column; gap: 13px;
  padding: 0 18px 4px;
  overflow-y: auto; flex: 1 1 auto; min-height: 0;
}

.lkm-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 0; }
.lkm-field[hidden] { display: none; }
.lkm-field > span { font-size: 12.5px; font-weight: 600; color: var(--ink-soft, #4a5568); }

/* H4: Titelfeld (Kurztitel) */
.lkm-in-title {
  font: inherit; font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--line, #e3e9f2); border-radius: 7px;
  background: var(--paper, #fff); color: var(--ink, #1f2733);
  outline: none; width: 100%; box-sizing: border-box;
}
.lkm-in-title:focus { border-color: var(--primary, #0d6b6e); box-shadow: 0 0 0 3px var(--primary-soft, #e6f2f2); }
.lkm-in-title::placeholder { color: var(--muted, #7a869a); }

/* ---------- Richtext-Notiz (Fix 5) ---------- */
.lkm-rt-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px;
  padding: 4px; margin-bottom: 4px;
  border: 1px solid var(--line, #e3e9f2); border-radius: 7px 7px 0 0;
  border-bottom: 0; background: var(--bg, #f6f8fb);
}
.lkm-rt {
  width: 28px; height: 26px; padding: 0;
  display: grid; place-items: center;
  font: inherit; font-size: 13px; line-height: 1;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--ink-soft, #4a5568); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.lkm-rt svg { width: 16px; height: 16px; }
.lkm-rt:hover { background: var(--primary-soft, #e6f2f2); color: var(--primary, #0d6b6e); }
/* G2: Ueberschriften-Buttons (H1..H6) — Textlabel statt Icon, etwas schmaler. */
.lkm-rt-h { width: 26px; font-size: 11px; font-weight: 700; letter-spacing: -.3px; }
.lkm-rt-sep { width: 1px; align-self: stretch; margin: 2px 3px; background: var(--line, #e3e9f2); }
.lkm-in-note {
  font: inherit; font-size: 14px; line-height: 1.5;
  /* H3: Notizfeld mit eigener begrenzter Hoehe + Innen-Scroll, damit es bei langer
     Notiz den Dialog nicht sprengt (Dialog-Body scrollt zusaetzlich aussen). */
  padding: 9px 11px; min-height: 120px; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--line, #e3e9f2); border-radius: 0 0 7px 7px;
  background: var(--paper, #fff); color: var(--ink, #1f2733); outline: none; width: 100%;
}
.lkm-in-note:focus { border-color: var(--primary, #0d6b6e); box-shadow: 0 0 0 3px var(--primary-soft, #e6f2f2); }
.lkm-in-note:empty::before { content: attr(data-ph); color: var(--muted, #7a869a); pointer-events: none; }
.lkm-in-note ul, .lkm-in-note ol { margin: 4px 0; padding-left: 22px; }
.lkm-in-note p { margin: 4px 0; }

/* ---------- M2: optionales Notizfeld mit Toggle ---------- */
.lkm-field-notewrap { gap: 0; }
.lkm-note-toggle {
  align-self: flex-start;
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 6px 9px; border: 0; border-radius: 7px;
  background: transparent; color: var(--primary, #0d6b6e); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s ease;
}
.lkm-note-toggle:hover { background: var(--primary-soft, #e6f2f2); }
.lkm-note-toggle-icon { display: inline-block; width: 1em; font-weight: 700; text-align: center; }
.lkm-field-note { display: block; margin-top: 6px; }
.lkm-field-note[hidden] { display: none; }

/* ---------- Farb-Auswahl + Color-Picker + Vorschau (Fix 2) ---------- */
/* H2 (BK-Variante 1): Swatches in ZWEI sauberen Zeilen, "Eigene Farbe" am ENDE
   der OBEREN Zeile fluchtend. Aeusseres Grid = Swatch-Block (Spalten 1..-2) +
   Picker-Spalte (auto) ganz rechts; der Picker sitzt in Reihe 1 (obere Zeile).
   Das innere .lkm-swatches-Grid verteilt die Swatches auf 6 Spalten -> 2 Zeilen. */
.lkm-color-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start; gap: 7px 12px;
}
.lkm-swatches {
  grid-column: 1; grid-row: 1 / span 2;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
  min-width: 0;
}
/* Eigene Farbe: rechts oben, fluchtend mit der oberen Swatch-Zeile (Reihe 1). */
.lkm-custom { grid-column: 2; grid-row: 1; align-self: start; }
.lkm-sw {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  border: 2px solid transparent; border-radius: 8px; cursor: pointer;
  transition: transform .1s ease, box-shadow .12s ease;
}
.lkm-sw:hover { transform: scale(1.08); }
.lkm-sw.is-sel { border-color: var(--primary, #0d6b6e); box-shadow: 0 0 0 3px var(--primary-soft, #e6f2f2); }

/* Eigene Farbe (Fix 2) */
.lkm-custom { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.lkm-in-color {
  width: 34px; height: 32px; padding: 0;
  border: 1px solid var(--line, #e3e9f2); border-radius: 8px;
  background: var(--paper, #fff); cursor: pointer;
}
.lkm-in-color::-webkit-color-swatch-wrapper { padding: 2px; }
.lkm-in-color::-webkit-color-swatch { border: 0; border-radius: 5px; }
.lkm-custom-cap { font-size: 10.5px; color: var(--muted, #7a869a); }

/* Live-Vorschau am Beispiel (Fix 2) */
.lkm-preview { display: inline-flex; align-items: center; gap: 3px; margin-top: 9px; }
.lkm-preview-ico { display: inline-grid; place-items: center; width: 0.95em; height: 0.95em; }
.lkm-preview-ico[hidden] { display: none; }
.lkm-preview-ico svg { width: 100%; height: 100%; }
.lkm-preview-mark {
  border-radius: 3px; padding: 1px 4px; font-size: 14px;
  background: var(--bg, #f6f8fb); color: var(--ink, #1f2733);
}

/* Symbol-Auswahl: scrollbar (Fix 3). H1: kompakter — mehr Spalten, kleinerer Gap,
   kleinere Zellen und niedrigere Hoehe, damit die Icon-Auswahl deutlich weniger
   Platz kostet. Icons bleiben klickbar/erkennbar. */
.lkm-iconpick {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px;
  max-height: 132px; overflow-y: auto;
  padding: 4px; border: 1px solid var(--line, #e3e9f2); border-radius: 8px;
  background: var(--bg, #f6f8fb);
}
.lkm-ic {
  aspect-ratio: 1; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line, #e3e9f2); border-radius: 6px;
  background: var(--paper, #fff); color: var(--ink-soft, #4a5568); cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.lkm-ic svg { width: 15px; height: 15px; }
.lkm-ic:hover { background: var(--primary-soft, #e6f2f2); color: var(--primary, #0d6b6e); }
.lkm-ic.is-sel { background: var(--primary, #0d6b6e); color: #fff; border-color: var(--primary, #0d6b6e); }

/* H3: Sticky-Footer — fix unten, immer sichtbar, mit eigenem Padding + Trennlinie. */
.lkm-editor-foot {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line, #e3e9f2);
  background: var(--paper, #fff);
}
.lkm-spacer { flex: 1; }
.lkm-btn {
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 16px; border-radius: 7px;
  border: 1px solid var(--line, #e3e9f2); background: var(--paper, #fff); color: var(--ink-soft, #4a5568);
  cursor: pointer; transition: all .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lkm-btn:hover { border-color: var(--primary, #0d6b6e); color: var(--primary, #0d6b6e); }
.lkm-btn-save {
  background: linear-gradient(135deg, var(--primary, #0d6b6e), var(--primary-dark, #0a5557));
  border-color: transparent; color: #fff;
}
.lkm-btn-save:hover { color: #fff; filter: brightness(1.07); }
.lkm-btn-del { width: 38px; padding: 9px 0; color: var(--red, #c0392b); border-color: #f0c5c0; }
.lkm-btn-del:hover { background: var(--red-soft, #fdecea); border-color: var(--red, #c0392b); color: var(--red, #c0392b); }

/* ---------- G5: Notiz-Tooltip im Glossar-Look (.gloss-tip nachgebaut) ----------
   HTML-faehig, anklickbar (pointer-events bei .show), Hover-Intent in der JS.
   Bewusst gleiche Optik/Geometrie wie .gloss-tip aus glossar.css. */
.lkm-note-tip {
  position: fixed; z-index: 320; left: 0; top: 0;
  max-width: 340px;
  background: #ffffff; color: #1f2937;
  border: 1px solid var(--line, #d9e2e6);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 30, 50, .18);
  padding: 12px 14px;
  font-size: 13px; line-height: 1.5;
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;
}
.lkm-note-tip.show {
  opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto;
}
.lkm-note-tip .lkm-nt-head {
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  color: var(--primary, #0d6b6e);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 5px;
}
.lkm-note-tip .lkm-nt-head svg { width: 13px; height: 13px; }
.lkm-note-tip .lkm-nt-content { color: #374151; }
.lkm-note-tip .lkm-nt-content p { margin: 4px 0; }
.lkm-note-tip .lkm-nt-content ul,
.lkm-note-tip .lkm-nt-content ol { margin: 4px 0; padding-left: 20px; }
.lkm-note-tip .lkm-nt-content h1,
.lkm-note-tip .lkm-nt-content h2,
.lkm-note-tip .lkm-nt-content h3,
.lkm-note-tip .lkm-nt-content h4,
.lkm-note-tip .lkm-nt-content h5,
.lkm-note-tip .lkm-nt-content h6 {
  margin: 6px 0 3px; line-height: 1.3; color: #1f2937;
}
.lkm-note-tip .lkm-nt-content h1 { font-size: 16px; }
.lkm-note-tip .lkm-nt-content h2 { font-size: 15px; }
.lkm-note-tip .lkm-nt-content h3 { font-size: 14px; }
.lkm-note-tip .lkm-nt-content h4,
.lkm-note-tip .lkm-nt-content h5,
.lkm-note-tip .lkm-nt-content h6 { font-size: 13px; }
.lkm-note-tip::after {
  content: ""; position: absolute; bottom: -6px; left: 50%;
  width: 11px; height: 11px; margin-left: -6px; background: #ffffff;
  border-right: 1px solid var(--line, #d9e2e6);
  border-bottom: 1px solid var(--line, #d9e2e6);
  transform: rotate(45deg);
}
.lkm-note-tip.lkm-nt-below::after {
  bottom: auto; top: -6px; border: 0;
  border-left: 1px solid var(--line, #d9e2e6);
  border-top: 1px solid var(--line, #d9e2e6);
}
@media print { .lkm-note-tip { display: none !important; } }

/* ---------- Mobil (<900px): Panel als Vollbild-Sheet ---------- */
@media (max-width: 900px) {
  .lkm-panel {
    position: fixed; inset: 0;
    width: 100%; max-width: none;
    border-left: 0; box-shadow: none;
  }
  .lkm-pop-btn { width: 40px; height: 40px; }
  .lkm-editor { max-width: none; }
  .lkm-iconpick { grid-template-columns: repeat(6, 1fr); }
}