/* textmarker.css – Entwurf v1 (05.10.2026). Nur Klassen mit Präfix fm-tm-. Variablen überschreibbar: --fm-text, --fm-flaeche, --fm-linie, --fm-akzent, --fm-tm-hinweis, --fm-tm-c1 … --fm-tm-c6 (Markerfarben, vom Modul aus daten.farben gesetzt).
   Markierte Wörter behalten in hell UND dunkel die helle Markerfarbe mit dunkler Schrift (wie im Bestand). */
.fm-tm{
  --fm-text:#1d2940; --fm-flaeche:#ffffff; --fm-linie:#d5dbe6; --fm-akzent:#2d4a8a; --fm-akzent-bg:#e6ecf8; --fm-bad:#b3261e;
  --fm-tm-hinweis:#ffe9a8; --fm-tm-tinte:#1f1b14; --fm-tm-schatten:0 6px 18px rgba(20,30,60,.18);
  color:var(--fm-text); font-size:1.1rem; line-height:1.7; position:relative;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .fm-tm{
    --fm-text:#eef1f7; --fm-flaeche:#1e2538; --fm-linie:#3a4560; --fm-akzent:#9db7f0; --fm-akzent-bg:#26324f; --fm-bad:#ff7d6b;
    --fm-tm-hinweis:#e0b84a; --fm-tm-schatten:0 6px 18px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] .fm-tm{
  --fm-text:#eef1f7; --fm-flaeche:#1e2538; --fm-linie:#3a4560; --fm-akzent:#9db7f0; --fm-akzent-bg:#26324f; --fm-bad:#ff7d6b;
  --fm-tm-hinweis:#e0b84a; --fm-tm-schatten:0 6px 18px rgba(0,0,0,.5);
}
.fm-tm-titel{margin:0 0 .3em;font-size:1.25em}
.fm-tm-hinweis{margin:0 0 .8em}
.fm-tm-hinweiszeile{margin:0 0 12px;padding:8px 12px;border-radius:12px;background:var(--fm-flaeche);border:1px dashed var(--fm-linie);color:var(--fm-text);font-size:.9rem;line-height:1.4}
.fm-tm-hinweiszeile[hidden]{display:none}
.fm-tm-absatz{margin:0}
/* Text */
.fm-tm-text{outline:none;border-radius:8px}
.fm-tm-text:focus-visible{outline:3px solid var(--fm-akzent);outline-offset:4px}
.fm-tm-text.is-aktiv{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}
.fm-tm-text.is-radierer .fm-tm-w[data-c]{cursor:pointer}
.fm-tm-satz.is-hinweis{background:var(--fm-tm-hinweis);color:var(--fm-tm-tinte);border-radius:4px;padding:0 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fm-tm-w{border-radius:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.fm-tm-w[data-c]{background:var(--mc);color:var(--fm-tm-tinte)}
.fm-tm-w[data-c="1"]{--mc:var(--fm-tm-c1)}
.fm-tm-w[data-c="2"]{--mc:var(--fm-tm-c2)}
.fm-tm-w[data-c="3"]{--mc:var(--fm-tm-c3)}
.fm-tm-w[data-c="4"]{--mc:var(--fm-tm-c4)}
.fm-tm-w[data-c="5"]{--mc:var(--fm-tm-c5)}
.fm-tm-w[data-c="6"]{--mc:var(--fm-tm-c6)}
/* Systemhinweis hat Vorrang: eigene Markierung nur als Unterstrich */
.fm-tm-satz.is-hinweis .fm-tm-w[data-c]{background:transparent;color:inherit;box-shadow:inset 0 -.3em 0 var(--mc)}
/* Tastatur: Schreibmarke und Auswahl */
.fm-tm-w.is-caret{outline:2px solid var(--fm-akzent);outline-offset:1px}
.fm-tm-w.is-auswahl{box-shadow:inset 0 -3px 0 var(--fm-akzent)}
.fm-tm-satz.is-hinweis .fm-tm-w[data-c].is-auswahl{box-shadow:inset 0 -.3em 0 var(--mc),inset 0 -3px 0 var(--fm-akzent)}
.fm-tm-hilfe,.fm-tm-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Leiste */
.fm-tm-leiste{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;background:var(--fm-flaeche);border:1px solid var(--fm-linie);border-radius:22px;box-shadow:var(--fm-tm-schatten);box-sizing:border-box}
.fm-tm-knopf{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:58px;min-width:44px;min-height:58px;border:2px solid transparent;border-radius:16px;background:transparent;color:var(--fm-text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fm-tm-ico{font-size:1.45rem;line-height:1}
.fm-tm-lbl{font-size:.75rem;line-height:1.1;color:var(--fm-text);opacity:.8}
.fm-tm-knopf:hover{background:var(--fm-akzent-bg)}
.fm-tm-knopf:focus-visible,.fm-tm-farbe:focus-visible{outline:3px solid var(--fm-akzent);outline-offset:2px}
.fm-tm-knopf[aria-pressed="true"]{border-color:var(--fm-text);background:var(--fm-akzent-bg)}
.fm-tm-knopf[disabled]{opacity:.35;cursor:default}
.fm-tm-knopf.is-sicher .fm-tm-lbl{color:var(--fm-bad);font-weight:700;opacity:1}
.fm-tm-farben{display:flex;flex-direction:column;gap:6px;padding:2px 0 4px}
.fm-tm-farben[hidden]{display:none}
.fm-tm-farbe{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:44px;height:44px;padding:0;border-radius:50%;border:3px solid var(--fm-flaeche);outline:2px solid var(--fm-linie);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:var(--mc)}
.fm-tm-farbe[data-c="1"]{--mc:var(--fm-tm-c1)}
.fm-tm-farbe[data-c="2"]{--mc:var(--fm-tm-c2)}
.fm-tm-farbe[data-c="3"]{--mc:var(--fm-tm-c3)}
.fm-tm-farbe[data-c="4"]{--mc:var(--fm-tm-c4)}
.fm-tm-farbe[data-c="5"]{--mc:var(--fm-tm-c5)}
.fm-tm-farbe[data-c="6"]{--mc:var(--fm-tm-c6)}
.fm-tm-farbe[aria-pressed="true"]{outline:3px solid var(--fm-text)}
.fm-tm-trenner{width:70%;height:1px;background:var(--fm-linie)}
/* inline: Leiste über dem Text, immer waagerecht */
.fm-tm-modus-inline .fm-tm-leiste{flex-direction:row;flex-wrap:wrap;justify-content:center;margin:0 0 12px;box-shadow:none}
.fm-tm-modus-inline .fm-tm-farben{flex-direction:row}
.fm-tm-modus-inline .fm-tm-trenner{width:1px;height:40px}
/* schwebend: ab 960 px rechts, darunter unten mittig; Leiste bricht um statt aus dem Bildschirm zu ragen */
.fm-tm-schwebend{position:fixed;z-index:40;right:14px;top:50%;transform:translateY(-50%)}
.fm-tm-platz{display:none}
@media (max-width:959px){
  .fm-tm-schwebend{top:auto;left:8px;right:8px;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:none;display:flex;justify-content:center;pointer-events:none}
  .fm-tm-schwebend .fm-tm-leiste{pointer-events:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;max-width:100%;padding:6px 8px;border-radius:18px;gap:6px}
  .fm-tm-schwebend .fm-tm-farben{flex-direction:row;align-items:center}
  .fm-tm-schwebend .fm-tm-trenner{width:1px;height:40px}
  .fm-tm-schwebend .fm-tm-knopf{width:52px}
  .fm-tm-platz{display:block;height:150px}
}
@media (prefers-reduced-motion:reduce){.fm-tm *{animation:none!important;transition:none!important}}
