/* VitaQM: manuelle Dokumentbreite fuer alle Leseansichten. Additiv, dist-safe. */
@media (min-width:1100px){
  html.vqm-dw .vqm-fullgrid{grid-template-columns:minmax(0,1fr) !important}
}
/* Reading-Container folgen der Steuerung */
html.vqm-dw .dok-inhalt,
html.vqm-dw .lern-wortlaut{max-width:var(--vqm-doc, 820px) !important;margin-left:auto !important;margin-right:auto !important}
/* Ausweichweg fuer Dokumente ohne .dok-inhalt: nur wenn keiner da ist, sonst
   wuerde die Regel bei den anderen Dokumenten doppelt greifen. Die Klasse
   setzt das Skript. */
html.vqm-dw .doc-read.vqm-leser{max-width:var(--vqm-doc, 820px) !important;margin-left:auto !important;margin-right:auto !important}
/* Die Leiste bleibt beim Scrollen oben stehen. Wer die Breite aendern will,
   merkt das meist erst mitten im Text -- dann muss man ganz nach oben scrollen,
   schieben, und wieder zurueck zur Lesestelle. position:sticky loest das ohne
   Eingriff in das Layout: die Leiste bleibt im Fluss und heftet sich erst an,
   wenn sie den oberen Rand erreicht. Der Abstand von oben laesst Platz fuer die
   Kopfleiste der Anwendung. */
.vqm-widthbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 14px;padding:9px 15px;border:1px solid #d8e3e7;border-radius:10px;background:#f6fafc;color:#26444f;font-size: var(--fs-meta, 15px);
  position:sticky;top:var(--vqm-dw-top,68px);z-index:40;
  box-shadow:0 1px 0 rgba(0,0,0,.03)}
/* Unsichtbare Marke vor der Leiste: verlaesst sie das Bild, klebt die Leiste.
   1 px hoch und ohne Aussenabstand, damit sie im Fluss nichts verschiebt. */
.vqm-haftmarke{height:1px;margin:0;padding:0;visibility:hidden;pointer-events:none}
/* Angeheftet hebt sie sich deutlicher ab, sonst schwimmt der Text darunter
   durch und die Leiste wirkt wie ein Teil davon. */
.vqm-widthbar.vqm-haftet{background:#eef7fa;border-color:#bcd7de;
  box-shadow:0 6px 14px -8px rgba(10,40,55,.35)}
.vqm-widthbar>strong{font-weight:700;font-size: var(--fs-meta, 15px);color:#1c3d47}
.vqm-widthbar .vqm-rangewrap{display:flex;align-items:center;gap:8px;flex:1 1 240px;max-width:460px;min-width:150px}
.vqm-widthbar .vqm-rangewrap span{font-size: var(--fs-meta, 15px);color:#7A8B96;white-space:nowrap}
.vqm-widthbar input[type=range]{flex:1 1 auto;width:100%;accent-color:#268c83;height:22px;cursor:pointer}
/* Gesperrt, solange „volle Breite" fuehrt: Der Regler bliebe sonst schiebbar,
   ohne etwas zu bewirken (gemessen 12.09.2026: 837 px vor und nach dem Haken). */
.vqm-widthbar input[type=range]:disabled{cursor:not-allowed;opacity:.45}
.vqm-widthbar .vqm-rangewrap.vqm-aus span{opacity:.45}
.vqm-widthbar label.vqm-toggle{display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:600;white-space:nowrap}
.vqm-widthbar label.vqm-toggle input{width:16px;height:16px;accent-color:#268c83}
/* Die eingestellte Breite in Zahlen. Ohne Rueckmeldung schiebt man blind und
   glaubt bei kleinen Schritten, es passiere nichts. */
.vqm-widthbar .vqm-mass{font-variant-numeric:tabular-nums;font-size: var(--fs-meta, 15px);color:#5d7883;min-width:56px}
.vqm-widthbar .vqm-reset{margin-left:auto;border:1px solid #c8d6dd;background:#fff;border-radius:8px;min-height:32px;padding:5px 12px;cursor:pointer;color:#425f6a;font:inherit;font-size: var(--fs-meta, 15px)}
.vqm-widthbar .vqm-reset:hover,.vqm-widthbar .vqm-reset:focus-visible{border-color:#268c83;color:#166c65;outline:none}
@media (max-width:1099px){.vqm-widthbar{display:none}}