/* ===== Canvas-Editor (.canvas) ===== */

/* Canvas-Textschrift: SELBST GEHOSTET (Roboto), damit Bildschirm und Export
   BITGENAU gleich umbrechen. `system-ui` löst je Gerät unterschiedlich auf
   (Desktop/iOS: SF Pro/Segoe — schmal; der headless-Export-Server: DejaVu Sans
   — breit) → identischer Text bricht verschieden um, überläuft die feste
   Boxhöhe und wird im Export abgeschnitten. Roboto ist metrisch praktisch
   deckungsgleich mit SF Pro, sodass bestehende Boxen NICHT neu umbrechen.
   Precache passiert automatisch (alles unter /vendor wird vom SW gecacht). */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/vendor/fonts/roboto-400.woff2) format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 400;
  font-display: swap; src: url(/vendor/fonts/roboto-400i.woff2) format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700;
  font-display: swap; src: url(/vendor/fonts/roboto-700.woff2) format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: italic; font-weight: 700;
  font-display: swap; src: url(/vendor/fonts/roboto-700i.woff2) format('woff2'); }

.cv-root {
  --cv-edge: var(--muted);
  /* Deterministische Canvas-Textschrift (siehe @font-face oben). */
  --cv-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
  height: 100%; display: flex; flex-direction: column;
  outline: none; position: relative; background: var(--bg);
  /* Abstand der schwebenden Werkzeugleiste (Handy) zum unteren Rand */
  --cv-dock-safe: env(safe-area-inset-bottom, 0px);
}
.cv-root.cv-maxed {
  position: fixed; inset: 0; z-index: 200;
  --cv-dock-safe: 0px;          /* Vollbild hält den Rand schon per padding frei */
  /* iPad/iPhone: Notch & Home-Indikator freihalten */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---- Toolbar (oben, schwebend) ----
   position:absolute statt Flex-Kind: bei schmaler Breite bricht die Leiste in
   eine zweite Reihe um. Läge sie im Flow, würde diese Reihe das Viewport (und
   damit die ganze Zeichnung) nach unten schieben. Als schwebende Leiste legt
   sich die zweite Reihe über den oberen Canvas-Rand — der Canvas bleibt fix.
   Das Viewport startet um eine Zeilenhöhe (--cv-tb-h, per JS gemessen) tiefer,
   damit die immer sichtbare erste Reihe nichts verdeckt. KEIN position:sticky:
   sticky in einem fixed-Container (cv-maxed) schwebt in Safari frei herum. */
.cv-toolbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 10px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
/* cv-maxed hält per padding-top die Notch frei — die schwebende Leiste sitzt
   im Padding-Kasten, also top:0 = unter der Notch. Explizit darunter schieben. */
.cv-root.cv-maxed .cv-toolbar { top: env(safe-area-inset-top); }

/* Beim Zeichnen (Stift/Radierer/aktiver Pencil) nie Text selektierbar */
.cv-root[data-mode="pen"] .cv-box, .cv-root[data-mode="erase"] .cv-box,
.cv-root.cv-inking .cv-box,
.cv-root[data-mode="pen"] .cv-body, .cv-root[data-mode="erase"] .cv-body,
.cv-root.cv-inking .cv-body {
  -webkit-user-select: none !important; user-select: none !important;
  -webkit-touch-callout: none;
}
.cv-tb-group { display: flex; align-items: center; gap: 2px; }
.cv-tb-group + .cv-tb-group,
.cv-tb-dock > .cv-tb-group:first-child {
  padding-left: 8px; border-left: 1px solid var(--line);
}
.cv-tb-spacer { flex: 1; }

/* Die Leiste hat zwei Hälften (siehe canvas/toolbar.js): .cv-tb-main ist immer
   sichtbar, .cv-tb-dock hängt am Modus. Am Desktop lösen sich beide auf, alles
   steht in EINER Leiste — `order` stellt die gewohnte Reihenfolge her
   (Werkzeuge · Stift/Formen · Einfügen · Undo · Auswahl · Ansicht). */
.cv-tb-main, .cv-tb-dock { display: contents; }
.cv-tb-modes { order: 1; }
.cv-tb-dock > .cv-tb-group { order: 2; }
.cv-tb-insert { order: 3; }
.cv-tb-actions { order: 4; }
/* Kind-Selektor, sonst gewinnt `.cv-tb-dock > .cv-tb-group` (spezifischer) */
.cv-tb-dock > .cv-tb-selgrp { order: 5; }
.cv-tb-spacer { order: 6; }
.cv-tb-view { order: 7; }
/* Knöpfe, die es nur am Handy gibt („+", „…", Formen-Menü) */
.cv-mob { display: none !important; }
.cv-tb-btn {
  background: none; border: 1px solid transparent; border-radius: 7px;
  color: var(--text); cursor: pointer; padding: 4px 8px; font-size: 14px;
  line-height: 1.2; min-width: 30px; white-space: nowrap;
}
.cv-tb-btn:hover { background: var(--panel2); }
.cv-tb-btn.on { background: var(--accent-dim); border-color: var(--accent); }
.cv-tb-btn:disabled { opacity: .4; cursor: default; }
.cv-tb-zoom {
  font-size: 12px; color: var(--muted); min-width: 44px; text-align: center;
  cursor: pointer; user-select: none;
}
.cv-tb-penbar { display: none; }
.cv-tb-penbar.on { display: flex; align-items: center; }
.cv-tb-widthgrp { display: none; }
.cv-tb-widthgrp.on { display: flex; align-items: center; }
.cv-tb-pencfg { display: none; }
.cv-tb-pencfg.on { display: flex; gap: 6px; align-items: center; }
.cv-tb-erasecfg { display: none; }
.cv-tb-erasecfg.on { display: flex; gap: 3px; align-items: center; }
.cv-tb-shapes { display: none; }
.cv-tb-shapes.on { display: flex; }
.cv-tb-penwidth { width: 80px; }

/* Stift-Presets (OneNote-Stiftregal) */
.cv-tb-penlist { display: flex; align-items: center; gap: 1px; }
.cv-tb-penchip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 28px; background: none; border: 1px solid transparent;
  border-radius: 7px; cursor: pointer; padding: 0;
}
.cv-tb-penchip:hover { background: var(--panel2); }
.cv-tb-penchip.on { background: var(--accent-dim); border-color: var(--accent); }
.cv-pen-dot { display: inline-block; border-radius: 50%; }

/* Stift-/Radierer-/Papier-Popover — fixed am body, über App-Chrome */
.cv-pen-pop {
  position: fixed; z-index: 700; min-width: 230px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px;
}
.cv-pop-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Papier-Panel: Tabs + Beschriftungen (strukturierte Optionen) */
.cv-pop-tabs {
  display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line);
  margin: -2px 0 4px; padding-bottom: 6px;
}
/* Erklärzeile unter einer Panel-Gruppe (z. B. Bereiche) */
.cv-pop-hint { font-size: 11.5px; color: var(--muted); line-height: 1.4; display: block; }
.cv-pop-tabs button {
  background: none; border: 0; border-radius: 6px; color: var(--muted);
  font-size: 12.5px; font-weight: 600; padding: 4px 10px; cursor: pointer;
}
.cv-pop-tabs button:hover { background: var(--panel2); }
.cv-pop-tabs button.on { background: var(--accent-dim); color: var(--text); }
.cv-pop-pane { display: flex; flex-direction: column; gap: 8px; }
.cv-pop-pane[hidden] { display: none; }
.cv-pop-lbl { font-size: 11.5px; color: var(--muted); min-width: 62px; }
.cv-pop-auto {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); font-size: 11.5px; padding: 3px 8px; cursor: pointer;
}
.cv-pop-auto.on { background: var(--accent-dim); border-color: var(--accent); }
.cv-pop-reset {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); font-size: 13px; padding: 1px 7px; cursor: pointer;
}
.cv-pop-reset:hover { color: var(--text); background: var(--panel2); }
.cv-pop-reset svg.ico { width: 13px; height: 13px; vertical-align: -2.5px; }
.cv-pop-types button {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); font-size: 12px; padding: 4px 9px; cursor: pointer;
}
.cv-pop-types button.on { background: var(--accent-dim); border-color: var(--accent); }
.cv-pop-swatch {
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line);
  cursor: pointer; padding: 0;
}
.cv-pop-swatch.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.cv-pop-swatches input[type="color"] { width: 24px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.cv-pop-row input[type="range"] { flex: 1; }
.cv-pop-w { font-size: 12px; color: var(--muted); min-width: 40px; text-align: right; }
/* Panel-Überschrift (Box-Textformat) — gleiche Trennlinie wie die Tabs */
.cv-pop-title { color: var(--muted); font-size: 12px; font-weight: 600; padding-bottom: 6px; }
/* Ausrichtungs-Knöpfe: quadratisch, nur Icon */
.cv-pop-icons button { padding: 4px 7px; line-height: 0; }
.cv-pop-types button svg.ico { width: 14px; height: 14px; vertical-align: -2.5px; }
.cv-pop-icons button svg.ico { width: 15px; height: 15px; }

/* Radierer-Cursor (Größen-Vorschau) */
.cv-erase-cursor {
  position: absolute; z-index: 57; pointer-events: none;
  border: 1.5px solid var(--accent); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translate(-50%, -50%);
}

/* Lineal: Leiste hängt UNTER der Zeichenkante (Oberkante = Linie) */
.cv-ruler {
  position: absolute; z-index: 56; height: 54px;
  transform-origin: 50% 0;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border: 1px solid var(--line); border-top: 2px solid var(--accent);
  box-shadow: var(--shadow); cursor: move; touch-action: none;
  backdrop-filter: none;
}
.cv-ruler-body { position: absolute; inset: 0; }
.cv-ruler-rot {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  cursor: grab; color: var(--muted);
}
.cv-ruler-rot svg.ico { width: 14px; height: 14px; }
.cv-ruler-deg {
  position: absolute; left: calc(50% + 24px); top: 50%; transform: translateY(-50%);
  font-size: 11.5px; color: var(--muted); user-select: none;
}

/* ---- Viewport (Punktraster) & Surface ---- */
.cv-viewport {
  flex: 1; position: relative; overflow: hidden;
  touch-action: none; cursor: default;
  /* startet unter der immer sichtbaren ersten Toolbar-Reihe (schwebend, s.o.) */
  margin-top: var(--cv-tb-h, 44px);
}
/* Punktraster: eigenes Canvas hinter der Fläche (view.js zeichnet pixelgenau —
   Safari rundet gekachelte CSS-Hintergründe, dann driftet das Raster). */
.cv-grid {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.cv-root[data-mode="hand"] .cv-viewport { cursor: grab; }
.cv-root[data-mode="pen"] .cv-viewport { cursor: crosshair; }
.cv-root[data-mode="erase"] .cv-viewport { cursor: cell; }
/* Farbeimer: eigener Cursor mit weißer Halo-Kontur (auf hell UND dunkel sichtbar),
   Hotspot am Ausgießpunkt. Fallback crosshair, falls Data-URI-Cursor scheitert. */
.cv-root[data-mode="fill"] .cv-viewport {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><g stroke="white" stroke-width="4"><path d="m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z"/><path d="m5 2 5 5"/><path d="M2 13h15"/><path d="M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z"/></g><g stroke="black" stroke-width="2"><path d="m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z"/><path d="m5 2 5 5"/><path d="M2 13h15"/><path d="M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z"/></g></svg>') 6 18, crosshair;
}
.cv-viewport.cv-panning { cursor: grabbing !important; }
.cv-root.cv-inking .cv-viewport { cursor: crosshair; }

.cv-surface {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  transform-origin: 0 0;
}

/* Tinte-Overlay liegt über allem, fängt aber keine Events */
.cv-ink {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 50;
}

/* ---- Kanten (SVG unter den Boxen) ---- */
svg.cv-edges { position: absolute; left: 0; top: 0; overflow: visible; z-index: 5; }
.cv-edge-line {
  fill: none; stroke: var(--cv-edge); stroke-width: 2;
  pointer-events: none;
}
.cv-edge.selected .cv-edge-line { stroke: var(--accent); stroke-width: 3.5; }
.cv-edge-hit {
  fill: none; stroke: transparent; stroke-width: 16;
  pointer-events: stroke; cursor: pointer;
}
.cv-edge-pending {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-dasharray: 6 5; pointer-events: none;
}
.cv-edge-label {
  position: absolute; transform: translate(-50%, -50%); z-index: 9;
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px;
  color: var(--text); font-size: 12px; padding: 1px 8px; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; user-select: none;
}
.cv-edge-label.selected { border-color: var(--accent); color: var(--accent); }

/* ---- Boxen ---- */
/* Nichts im Canvas ist markierbar — außer der Box im Bearbeiten-Modus (unten).
   Sonst wirft jedes Ziehen (Box verschieben, Lasso, Shift-Klick) nebenbei eine
   Textauswahl an, die über die ganze App läuft. Die `-webkit-`-Schreibung ist
   PFLICHT: Safari (iPad!) kennt die schreibungslose Form erst ab 17, ältere
   Versionen ignorieren die Regel sonst komplett. */
.cv-viewport, .cv-surface {
  -webkit-user-select: none; user-select: none;
}
.cv-box {
  position: absolute; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;   /* iOS: kein Auswahl-Bubble beim langen Tippen */
}
.cv-box.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.cv-box.cv-dragging { opacity: .85; }
.cv-box.cv-link-target { outline: 2px dashed var(--accent); outline-offset: 2px; }
.cv-box.cv-frameless { background: transparent; border-color: transparent; }
.cv-box.cv-has-color { border-left: 4px solid var(--node-color); }

/* Gruppen: hinter allen Nodes, ziehen Inhalt nicht mit */
.cv-box.cv-type-group {
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  border: 1.5px dashed var(--muted); border-radius: 12px;
}
/* Gruppen-Hintergrundbild (JSON-Canvas background/backgroundStyle) */
.cv-group-bg {
  position: absolute; inset: 0; border-radius: inherit;
  background-position: center; background-repeat: no-repeat;
  pointer-events: none;
}

/* Helles Papier (Papierfarbe mit hoher Helligkeit): frei schwebender Text und
   Beschriftungen brauchen dunkle Farben — Boxen mit eigenem Panel-Hintergrund
   bleiben unangetastet (dort stimmt der Theme-Kontrast weiterhin). */
.cv-root.cv-paper-light .cv-box.cv-transparent .cv-body,
.cv-root.cv-paper-light .cv-box.cv-frameless .cv-body { color: #1c2430; }
.cv-root.cv-paper-light .cv-edge-line { stroke: rgba(31, 41, 55, .55); }
.cv-group-label {
  position: absolute; top: -1px; left: -1px;
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px 0 10px 0; color: var(--muted);
  font-family: var(--cv-font); font-size: 12px; font-weight: 600; padding: 2px 10px; max-width: 90%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cv-body {
  position: absolute; inset: 0; padding: 7px 9px; overflow: hidden;
  border-radius: inherit; font-family: var(--cv-font); line-height: 1.4;
  /* Box-weite Schriftgröße (Node-Extension fontSize, gesetzt als Inline-Var).
     Überschriften/Listen skalieren per em mit. */
  font-size: var(--cv-box-fs, 13px);
  display: flex; flex-direction: column; justify-content: flex-start;
}
/* Box-weite Ausrichtung: senkrecht über die Flex-Achse, waagerecht über
   text-align (vererbt sich auf alle Absätze, Listen und Zellen). */
.cv-va-middle > .cv-body { justify-content: center; }
.cv-va-bottom > .cv-body { justify-content: flex-end; }
.cv-ta-center > .cv-body { text-align: center; }
.cv-ta-right > .cv-body { text-align: right; }
/* Blocksatz: KEINE Silbentrennung — Wörter dürfen nicht mit Bindestrich
   auseinandergerissen werden (ausdrücklicher Wunsch); die größeren Wortlücken
   sind der Preis dafür. Die letzte Zeile bleibt bündig links (Browser-Standard
   text-align-last: auto). */
.cv-ta-justify > .cv-body { text-align: justify; hyphens: none; }
.cv-body[contenteditable="true"] {
  overflow-y: auto; overflow-x: hidden; outline: none; cursor: text;
  /* Gegenstück zum user-select:none der Box: HIER ist Markieren erwünscht.
     Auch hier beide Schreibungen — Safari erbt sonst das „none" der Box. */
  -webkit-user-select: text; user-select: text;
  /* Die Scrollbar darf KEINEN Layout-Platz belegen, sonst verschiebt ihr
     Auftauchen die Textbreite und die Zeilen brechen neu um. Als Overlay (über
     dem Inhalt) bleibt die nutzbare Breite konstant → stabile Umbrüche.
     scrollbar-gutter wäre der saubere Weg, ist aber nicht überall umgesetzt. */
  scrollbar-width: none;            /* Firefox: keine Layout-Breite */
  scrollbar-gutter: stable;         /* moderne Engines: stabil, falls doch sichtbar */
}
.cv-body[contenteditable="true"]::-webkit-scrollbar { width: 0; height: 0; }  /* WebKit/Chrome */
.cv-box.editing { outline: 2px solid var(--accent); }
.cv-body p { margin: 0 0 .4em; }
.cv-body p:last-child { margin-bottom: 0; }
.cv-body img { max-width: 100%; }
.cv-body a { color: var(--accent); }
.cv-body pre {
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 8px; overflow: auto; font-size: 12px;
}
.cv-body ul, .cv-body ol { margin: 0 0 .4em; padding-left: 1.4em; }

/* Datei-/Link-/Medien-Inhalte */
.cv-media {
  width: 100%; height: 100%; object-fit: contain; border-radius: inherit;
  pointer-events: none;
}
.cv-type-file video.cv-media, .cv-type-file audio { pointer-events: auto; }
.cv-type-file .cv-body { padding: 0; align-items: stretch; }
.cv-file-card {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  min-width: 0; margin: auto 0;
}
.cv-file-icon { font-size: 22px; }
.cv-file-name {
  font-size: 13px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px;
}
.cv-type-file audio { width: 100%; }
.cv-link {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  color: inherit; text-decoration: none; min-width: 0; margin: auto 0;
}
.cv-link-ico { width: 18px; height: 18px; font-size: 15px; }
.cv-link-host { font-weight: 600; font-size: 13px; }
.cv-link-url {
  color: var(--muted); font-size: 11px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.cv-link:hover .cv-link-host { color: var(--accent); text-decoration: underline; }

/* Box-Tinte (Mini-Canvas) */
.cv-box-ink {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 4; border-radius: inherit;
}

/* Memorize-Cover */
.cv-cover {
  position: absolute; inset: 0; z-index: 20; border-radius: inherit;
  background: var(--panel2); border: 1px dashed var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; color: var(--muted); cursor: pointer;
}
.cv-cover:hover { color: var(--accent); border-color: var(--accent); }
.cv-box.cv-reveal .cv-cover { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* ---- Anker (Verbindungen ziehen) ---- */
.cv-anchor {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--bg);
  opacity: 0; cursor: crosshair; z-index: 25; transition: opacity .12s;
}
.cv-root[data-mode="select"] .cv-box:hover > .cv-anchor,
.cv-root.cv-linking .cv-box:hover > .cv-anchor { opacity: 1; }
.cv-anchor-top { top: -6px; left: calc(50% - 6px); }
.cv-anchor-right { right: -6px; top: calc(50% - 6px); }
.cv-anchor-bottom { bottom: -6px; left: calc(50% - 6px); }
.cv-anchor-left { left: -6px; top: calc(50% - 6px); }
/* An der markierten Box sitzen die Resize-Griffe auf denselben Kantenmitten und
   haben eine großzügige Trefferfläche — die Anker rücken dann ENTLANG der Kante
   zur Seite, damit beide frei greifbar sind. Nach außen ginge nicht: oben liegt
   dort der Dreh-Griff (mit eigener, großer Trefferfläche). */
.cv-root[data-mode="select"] .cv-box.selected > .cv-anchor-top { left: calc(50% + 16px); }
.cv-root[data-mode="select"] .cv-box.selected > .cv-anchor-bottom { left: calc(50% + 16px); }
.cv-root[data-mode="select"] .cv-box.selected > .cv-anchor-right { top: calc(50% + 16px); }
.cv-root[data-mode="select"] .cv-box.selected > .cv-anchor-left { top: calc(50% + 16px); }

/* ---- Resize-Griffe (8) ----
   Der PUNKT bleibt klein (sonst verdeckt er den Inhalt), die TREFFERFLÄCHE ist
   ein unsichtbares ::after ringsum — derselbe Kniff wie beim Dreh-Griff. Größe
   und Lage hängen an --rh/--rh-hit: die Touch-Variante muss so nur die zwei
   Werte setzen (vorher wuchs der Punkt, die Position blieb → saß schief). */
.cv-rh {
  /* --cv-hz = 1/Zoom (view.js, gedeckelt): Griffe bleiben beim Rauszoomen
     bildschirmgleich groß statt mitzuschrumpfen. */
  --rh: calc(9px * var(--cv-hz, 1));          /* sichtbarer Punkt */
  --rh-hit: calc(9px * var(--cv-hz, 1));      /* zusätzlicher Griffrand ringsum */
  --rh-off: calc((var(--rh) + 2px) / -2);     /* + 2px Rahmen, mittig auf die Kante */
  position: absolute; width: var(--rh); height: var(--rh); border-radius: 2px;
  background: var(--accent); border: 1px solid var(--bg);
  display: none; z-index: 26;
}
.cv-rh::after { content: ''; position: absolute; inset: calc(-1 * var(--rh-hit)); }
.cv-root[data-mode="select"] .cv-box.selected > .cv-rh { display: block; }
.cv-rh-nw { top: var(--rh-off); left: var(--rh-off); cursor: nwse-resize; }
.cv-rh-n { top: var(--rh-off); left: calc(50% + var(--rh-off)); cursor: ns-resize; }
.cv-rh-ne { top: var(--rh-off); right: var(--rh-off); cursor: nesw-resize; }
.cv-rh-e { right: var(--rh-off); top: calc(50% + var(--rh-off)); cursor: ew-resize; }
.cv-rh-se { bottom: var(--rh-off); right: var(--rh-off); cursor: nwse-resize; }
.cv-rh-s { bottom: var(--rh-off); left: calc(50% + var(--rh-off)); cursor: ns-resize; }
.cv-rh-sw { bottom: var(--rh-off); left: var(--rh-off); cursor: nesw-resize; }
.cv-rh-w { left: var(--rh-off); top: calc(50% + var(--rh-off)); cursor: ew-resize; }

/* ---- Rubber-Band ---- */
.cv-band {
  position: absolute; z-index: 40; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid var(--accent); border-radius: 3px;
}

/* ---- Ausrichtungslinien beim Ziehen (magnetisch) ---- */
.cv-guide {
  position: absolute; z-index: 45; pointer-events: none;
  background: var(--accent);
}
.cv-guide-v { top: 0; bottom: 0; width: 1px; }
.cv-guide-h { left: 0; right: 0; height: 1px; }
.cv-guide[hidden] { display: none; }

/* ---- Dreh-Griff der Box (nur bei Einzel-Auswahl) ---- */
.cv-box-rot {
  position: absolute; left: 50%; top: -30px; width: 13px; height: 13px;
  box-sizing: border-box; transform: translateX(-50%);
  background: var(--panel); border: 2px solid var(--accent); border-radius: 50%;
  cursor: grab; display: none; z-index: 26;
}
.cv-box-rot::before {
  content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 17px;
  background: var(--accent); transform: translateX(-50%);
}
.cv-box-rot::after { content: ''; position: absolute; inset: -12px; }
.cv-root[data-mode="select"] .cv-box.selected.cv-single > .cv-box-rot { display: block; }
@media (pointer: coarse) { .cv-box-rot { width: 16px; height: 16px; } }

/* ---- Lasso-Auswahl freihändiger Tinte ----
   Schicht liegt im Viewport ÜBER dem Tinten-Overlay (z-index 50); Rahmen und
   Griffe rechnen in Screen-Koordinaten → konstante Griffgröße bei jedem Zoom. */
.cv-inksel-layer { position: absolute; inset: 0; z-index: 58; pointer-events: none; }
.cv-inksel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cv-lasso-path {
  fill: color-mix(in srgb, var(--accent) 12%, transparent);
  stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 6 4;
}
/* Auswahl-Rahmen (orientierte Box): Körper = Verschiebe-Fläche */
.cv-inksel-frame {
  position: absolute; box-sizing: border-box; pointer-events: auto;
  touch-action: none; cursor: move;
  border: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.cv-inksel-frame[hidden] { display: none; }
/* Ecken-Griffe (Skalieren) — kleine Optik, große Touch-Trefferfläche */
.cv-inksel-h {
  position: absolute; width: 13px; height: 13px; box-sizing: border-box;
  background: var(--panel); border: 2px solid var(--accent); border-radius: 3px;
}
.cv-inksel-h::before { content: ''; position: absolute; inset: -13px; }
.cv-inksel-h-nw { left: 0;    top: 0;    transform: translate(-50%, -50%); cursor: nwse-resize; }
.cv-inksel-h-ne { right: 0;   top: 0;    transform: translate(50%, -50%);  cursor: nesw-resize; }
.cv-inksel-h-se { right: 0;   bottom: 0; transform: translate(50%, 50%);   cursor: nwse-resize; }
.cv-inksel-h-sw { left: 0;    bottom: 0; transform: translate(-50%, 50%);  cursor: nesw-resize; }
/* Dreh-Griff über der Oberkante */
.cv-inksel-rot {
  position: absolute; left: 50%; top: 0; width: 13px; height: 13px; box-sizing: border-box;
  transform: translate(-50%, -28px);
  background: var(--panel); border: 2px solid var(--accent); border-radius: 50%; cursor: grab;
}
.cv-inksel-rot::before {
  content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: 28px;
  background: var(--accent); transform: translateX(-50%);
}
.cv-inksel-rot::after { content: ''; position: absolute; inset: -13px; }
/* Aktionsleiste (Duplizieren/Löschen) unter der Auswahl — unrotiert */
.cv-inksel-bar {
  position: absolute; z-index: 59; pointer-events: auto;
  display: flex; gap: 2px; transform: translate(-50%, 0);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 3px; box-shadow: var(--shadow);
}
.cv-inksel-bar[hidden] { display: none; }
.cv-inksel-bar button {
  background: none; border: 0; border-radius: 6px; color: var(--text);
  cursor: pointer; padding: 3px 7px; display: flex; align-items: center;
}
.cv-inksel-bar button:hover { background: var(--panel2); }
.cv-inksel-bar .cv-inksel-del:hover { color: #e35a5a; }

/* ---- Mini-Formatleiste im Text-Edit ----
   Liegt im VIEWPORT (nicht in der skalierten Surface): konstante Größe bei
   jedem Zoom, wird von boxes.js über/unter der Box platziert und in den
   sichtbaren Bereich geklemmt. */
.cv-fmtbar {
  position: absolute; z-index: 55; display: none; gap: 2px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 3px; box-shadow: var(--shadow);
}
.cv-fmtbar.on { display: flex; }
.cv-fmtbar button[data-cmd="done"] { color: var(--ok); }
.cv-fmtbar button {
  background: none; border: 0; border-radius: 6px; color: var(--text);
  cursor: pointer; padding: 2px 8px; font-size: 13px;
}
.cv-fmtbar button:hover { background: var(--panel2); }

/* ---- readonly ---- */
.cv-readonly .cv-anchor, .cv-readonly .cv-rh { display: none !important; }
.cv-readonly .cv-box { cursor: default; }

/* ---- Fixierte Boxen (Unterlage): nicht wählbar/ziehbar, Stift geht drüber */
.cv-box.cv-locked { cursor: default; }
.cv-box.cv-locked > .cv-anchor, .cv-box.cv-locked > .cv-rh,
.cv-box.cv-locked > .cv-box-rot { display: none !important; }

/* ===== Rich-Text in Text-Boxen (OneNote-Features) ===== */

/* Pfeil-Aufzählung: KEINE eigene Glyph-Regel mehr — der Canvas nutzt dasselbe
   Pfeil-ICON wie die Note (editor.css ul.arrow, Form aus --ico-arrow, Farbe =
   Textfarbe). Der schwerere 🡪 bleibt nur für den Pfeil MITTEN im Text
   (rich-text.js AUTO_ARROW). */

/* Todo-Liste: gezeichnete Checkbox vor jedem Punkt, Klick toggelt .done. */
.cv-body ul.todo { list-style: none; padding-left: 1.5em; }
.cv-body ul.todo > li { position: relative; padding-left: 4px; }
.cv-body ul.todo > li::before {
  content: ""; position: absolute; left: -1.35em; top: .3em;
  width: 13px; height: 13px; border: 1.5px solid var(--muted);
  border-radius: 4px; background: transparent; cursor: pointer;
}
.cv-body ul.todo > li.done { color: var(--muted); text-decoration: line-through; }
.cv-body ul.todo > li.done::before { background: var(--accent); border-color: var(--accent); }
.cv-body ul.todo > li.done::after {
  content: ""; position: absolute; left: -1.12em; top: .52em;
  width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* Tabellen in Boxen */
.cv-body table { border-collapse: collapse; margin: .45em 0; font-size: .95em; }
.cv-body th, .cv-body td {
  border: 1px solid var(--line); padding: 4px 9px; min-width: 40px;
  vertical-align: top; text-align: left;
}
.cv-body th { background: rgba(127,127,127,.1); font-weight: 600; }

/* Spalten-Layout: wie eine Tabelle ausgerichtet, aber ohne sichtbare Ränder.
   Gestrichelte Hilfslinien nur bei Hover bzw. im Edit-Modus. */
.cv-body table.cloud-columns { margin: .3em 0; }
.cv-body table.cloud-columns td {
  border: 1px dashed transparent; padding: 2px 8px; vertical-align: middle;
}
.cv-body table.cloud-columns:hover td,
.cv-box.editing .cv-body table.cloud-columns td { border-color: var(--line); }

.cv-body blockquote {
  margin: .4em 0; padding: 2px 0 2px 11px;
  border-left: 3px solid var(--accent); color: var(--muted);
}
.cv-body hr { border: 0; border-top: 1px solid var(--line); margin: .7em 0; }
.cv-body h1, .cv-body h2, .cv-body h3 { margin: .3em 0 .35em; line-height: 1.25; }
.cv-body h1 { font-size: 1.45em; }
.cv-body h2 { font-size: 1.25em; }
.cv-body h3 { font-size: 1.1em; }
.cv-body code {
  font-family: ui-monospace, monospace; font-size: .9em;
  background: rgba(127,127,127,.14); padding: 1px 5px; border-radius: 4px;
}

/* ---- Rich-Inhalte: Formeln ($…$), Mermaid, Funktionsplots, Tags ---- */
.cv-math { display: inline-block; }
.cv-math .katex { font-size: 1.06em; }
.cv-mermaid { display: flex; justify-content: center; overflow: hidden; }
.cv-mermaid svg { max-width: 100%; height: auto; }
.cv-plot-legend { font-size: 11px; color: var(--muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; }
.cv-rich-err { color: #e35a5a; font-size: 12px; padding: 6px; }
.cv-tag {
  display: inline-block; margin-right: 4px; cursor: default;
  font-size: 1em; line-height: 1; user-select: none;
}

/* Transparente Box: kein Rahmen-Schatten, Inhalt schwebt auf dem Canvas. */
.cv-box.cv-transparent { box-shadow: none; }
.cv-box.cv-transparent:not(.editing):not(.selected) { border-color: transparent; }

/* Erweiterte Formatleiste (OneNote-artig) */
.cv-fmtbar { flex-wrap: nowrap; max-width: 600px; align-items: center; }
.cv-fmt-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; }
.cv-fmtbar .cv-fmt-sep { width: 1px; align-self: stretch; background: var(--line); margin: 3px 2px; }
.cv-fmtbar button svg.ico { width: 14px; height: 14px; vertical-align: -2.5px; }
.cv-fmtbar select {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; font-size: 12px; padding: 2px 4px; max-width: 96px; cursor: pointer;
}
.cv-fmt-color {
  position: relative; display: inline-flex; flex-direction: column;
  align-items: center; cursor: pointer; padding: 1px 6px; border-radius: 6px;
}
.cv-fmt-color:hover { background: var(--panel2); }
.cv-fmt-a { font-size: 13px; font-weight: 700; line-height: 1.1; }
.cv-fmt-hl { background: #fff176; color: #1b1b1f; border-radius: 3px; padding: 0 3px; }
.cv-fmt-color input[type="color"] {
  width: 16px; height: 7px; padding: 0; border: 0; background: none; cursor: pointer;
}

/* Verschieben-Griff + Ein-/Ausklappen der Formatleiste */
.cv-fmt-grip {
  display: inline-flex; align-items: center; align-self: stretch;
  padding: 0 1px; border-radius: 5px; color: var(--muted);
  cursor: grab; touch-action: none;
}
.cv-fmt-grip:hover { background: var(--panel2); }
.cv-fmt-grip svg.ico { width: 13px; height: 13px; transform: rotate(90deg); }
.cv-fmtbar.cv-fmt-dragging, .cv-fmtbar.cv-fmt-dragging .cv-fmt-grip { cursor: grabbing; }
.cv-fmt-collapse { align-self: center; color: var(--muted); }
.cv-fmtbar.cv-collapsed { max-width: none; }
.cv-fmtbar.cv-collapsed .cv-fmt-tools { display: none; }
.cv-fmtbar.cv-collapsed .cv-fmt-collapse svg.ico { transform: rotate(180deg); }
/* Lasso-Knopf: primär ein Touch-Werkzeug */
.cv-tb-lasso { display: none; }
@media (pointer: coarse) { .cv-tb-lasso { display: inline-flex; } }

/* SVG-Icons in Canvas-Toolbar */
.cv-tb-btn svg.ico { width: 15px; height: 15px; }

/* Auswahl-Aktionen: nur sichtbar, wenn etwas markiert ist */
.cv-tb-selgrp { display: none; }
.cv-tb-selgrp.on { display: flex; }
.cv-tb-selgrp .cv-tb-btn { color: var(--accent); }
.cv-tb-selgrp .cv-tb-btn:disabled { color: var(--muted); }

/* Touch: größere Ziele für Toolbar & Formatleiste */
@media (pointer: coarse) {
  .cv-tb-btn { padding: 8px 11px; }
  .cv-fmtbar button { padding: 7px 11px; font-size: 15px; }
  .cv-pop-types button { padding: 7px 12px; font-size: 13px; }
  .cv-pop-icons button { padding: 7px 10px; }
  .cv-fmt-grip { padding: 0 5px; }
  .cv-fmt-grip svg.ico { width: 16px; height: 16px; }
  .cv-anchor { width: 16px; height: 16px; }
  /* Finger: ~40px Ziel */
  .cv-rh { --rh: calc(14px * var(--cv-hz, 1)); --rh-hit: calc(13px * var(--cv-hz, 1)); }
  /* Ohne Hover: Anker an der markierten Box zeigen (Verbindungen per Touch) */
  .cv-root[data-mode="select"] .cv-box.selected > .cv-anchor { opacity: 1; }
}

/* ---- Präsentationsmodus ---- */
.cv-presenting .cv-toolbar { display: none; }
/* Ohne sichtbare Toolbar keinen reservierten Zeilen-Offset lassen. */
.cv-presenting .cv-viewport, body.cv-exporting .cv-viewport { margin-top: 0; }
.cv-presenting .cv-anchor, .cv-presenting .cv-rh { display: none !important; }
.cv-presenting .cv-viewport { cursor: pointer; }
.cv-present-bar {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 80;
  display: flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 10px; box-shadow: var(--shadow); opacity: .92;
}
.cv-present-bar button {
  background: none; border: 0; color: var(--text); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 3px 9px; border-radius: 999px;
}
.cv-present-bar button:hover { background: var(--panel2); }
.cv-pres-count { font-size: 12.5px; color: var(--muted); min-width: 44px; text-align: center; }

/* ---- Datei-Einbettungen in Boxen (Inhalts-Vorschau) ---- */
.cv-embed-head {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 4px 8px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel2) 60%, transparent);
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  border-radius: var(--radius) var(--radius) 0 0;
}
.cv-embed-head svg.ico { width: 13px; height: 13px; }
.cv-embed-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-embed {
  flex: 1; min-height: 0; overflow: hidden; position: relative;
  pointer-events: none;   /* Box bleibt überall greifbar/ziehbar */
}
.cv-embed-wait {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--muted); font-size: 12px;
}
.cv-embed-md, .cv-embed-txt {
  height: 100%; overflow: hidden; padding: 6px 9px; font-size: 12px;
  line-height: 1.45;
}
.cv-embed-md h1 { font-size: 1.3em; margin: .2em 0; }
.cv-embed-md h2 { font-size: 1.15em; margin: .2em 0; }
.cv-embed-md p { margin: 0 0 .4em; }
.cv-embed-md img { max-width: 100%; }
.cv-embed-txt { margin: 0; font-family: ui-monospace, monospace; font-size: 11px; white-space: pre-wrap; }
.cv-embed-frame { width: 100%; height: 100%; border: 0; background: var(--bg); }
.cv-type-file .cv-body { display: flex; flex-direction: column; }

/* ---- Mobil: EINE Reihe oben, Werkzeug-Optionen schweben unten ----
   Vorher brach die Leiste am Handy in bis zu VIER Reihen um und verdeckte das
   obere Viertel der Zeichenfläche. Jetzt:
     • oben genau EINE Reihe (Werkzeuge · + · Undo/Redo · Einpassen · …),
       notfalls seitlich wischbar statt umbrechend;
     • alles Modusabhängige (Stiftregal, Formen, Radierer, Auswahl-Aktionen)
       sitzt als schwebende Pille am unteren Rand — in Daumenreichweite und
       nur sichtbar, wenn es etwas zu zeigen gibt (.cv-dock-on aus toolbar.js).
   Dafür wird die Leiste selbst zum durchreichenden Overlay über der ganzen
   Fläche (pointer-events:none); sichtbar sind nur ihre beiden Kinder. Der
   Zeichen-Offset --cv-tb-h bleibt die Höhe der oberen Reihe. */
@media (max-width: 768px) {
  .cv-toolbar {
    inset: 0; display: block; gap: 0; padding: 0;
    background: none; border-bottom: 0; pointer-events: none;
  }
  .cv-tb-main {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; gap: 4px;
    padding: 4px 6px; background: var(--panel);
    border-bottom: 1px solid var(--line);
    pointer-events: auto;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .cv-tb-dock { display: none; }
  .cv-tb-dock.cv-dock-on {
    display: flex; align-items: center; gap: 4px;
    position: absolute; left: 8px; right: 8px; margin: 0 auto;
    bottom: calc(10px + var(--cv-dock-safe, 0px));
    width: fit-content; max-width: calc(100% - 16px);
    padding: 5px 8px; background: var(--panel);
    border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow); pointer-events: auto;
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .cv-tb-main::-webkit-scrollbar, .cv-tb-dock::-webkit-scrollbar { display: none; }
  /* Wird es eng, wird gewischt — NICHT gestaucht: geschrumpfte Knöpfe brechen
     ihren Inhalt um und die Leiste wird doppelt so hoch. */
  .cv-tb-main > .cv-tb-group, .cv-tb-dock > .cv-tb-group { flex: none; }
  /* In der Pille steht die erste Gruppe am Anfang — kein Trennstrich davor. */
  .cv-tb-dock > .cv-tb-group:first-child { padding-left: 0; border-left: 0; }
  .cv-tb-group + .cv-tb-group { padding-left: 4px; }
  .cv-tb-btn { padding: 5px 6px; min-width: 26px; }
  .cv-tb-penchip { width: 25px; }
  .cv-tb-penwidth { width: 64px; }
  /* Lineal / „Nur Stift" liegen am Handy im „…"-Menü (toolbar.js) — in der
     schwebenden Leiste zählt jeder Millimeter. */
  .cv-tb-pencfg { display: none !important; }
  /* Desktop-Knöpfe weichen den Menüs „+" und „…" (toolbar.js). */
  .cv-tb-zoom, .cv-desk { display: none !important; }
  .cv-mob { display: inline-block !important; }
  .cv-tb-shapemenu svg.ico:last-child { width: 11px; height: 11px; opacity: .6; }
  /* Formatleiste (Text-Edit): EINE wischbare Zeile statt vier Reihen —
     dieselbe Idee wie bei der Werkzeugleiste. Griff und Klapp-Knopf bleiben
     außerhalb des Scrollbereichs stehen. */
  .cv-fmtbar { max-width: calc(100% - 8px); }
  .cv-fmt-tools {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .cv-fmt-tools::-webkit-scrollbar { display: none; }
  .cv-fmt-tools > * { flex: none; }
  /* In der einen Zeile steht vorn, was man am Handy dauernd braucht: „Fertig",
     Fett/Kursiv, Listen. Absatzformat/Schrift/Größe wandern ans Ende. */
  .cv-fmtbar button[data-cmd="done"] { order: -1; }
  .cv-fmt-tools > select, .cv-fmt-tools > .cv-fmt-sep-1 { order: 1; }

  /* Alles, was sonst unten schwebt, weicht der Werkzeugleiste aus:
     Übersichtskarte, Sync-Pille, Diktat-Pille. */
  .cv-root.cv-has-dock .cv-minimap { bottom: 64px; }
  body:has(.cv-root.cv-has-dock) .sync-card,
  body:has(.cv-root.cv-has-dock) .qd-hud { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* Sehr schmale Telefone (≤360 px): die obere Reihe enger stellen, damit sie
   ohne Wischen ganz passt — „…" darf nie halb am Rand kleben. */
@media (max-width: 360px) {
  .cv-tb-main { gap: 2px; padding: 4px 4px; }
  .cv-tb-main .cv-tb-btn { padding: 5px 4px; min-width: 22px; }
  .cv-tb-main .cv-tb-group + .cv-tb-group { padding-left: 3px; }
  /* dasselbe für die schwebende Leiste: Stiftregal + Breite + Form passen */
  .cv-tb-dock.cv-dock-on { gap: 2px; padding: 5px 6px; }
  .cv-tb-dock .cv-tb-btn { padding: 5px 4px; min-width: 22px; }
  .cv-tb-penchip { width: 23px; }
  .cv-tb-penwidth { width: 52px; }
}

/* CSS-Vollbild-Fallback: App-Chrome komplett ausblenden (Mac/iOS ohne bzw.
   mit scheiterndem Element-Fullscreen) — sonst bleiben Topbar/Tab-Leiste
   sichtbar und die Werkzeugleiste landet in der Stacking-Falle. */
body.so-maxed #topbar, body.so-maxed #tab-strip, body.so-maxed #sidebar,
body.so-maxed #sidebar-backdrop,
body.so-maxed #format-toolbar { display: none !important; }
/* Der Links-Rand-Wisch zeigt die Sidebar im Vollbild NICHT als Overlay, sondern
   beendet den Vollbildmodus und öffnet sie normal (ui/sidebar-edge.js). */

/* Natives Element-Vollbild: Werkzeugleiste garantiert sichtbar */
.cv-root:fullscreen { background: var(--bg); }
.cv-root:fullscreen .cv-toolbar { display: flex !important; }

/* ---- Minimap (Übersichtskarte) ---- */
.cv-minimap {
  position: absolute; right: 12px; bottom: 12px; z-index: 60;
  width: 200px; height: 140px; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); cursor: pointer;
  touch-action: none;
}
.cv-minimap[hidden] { display: none; }
body.cv-exporting .cv-minimap { display: none !important; }

/* Helle Box-Hintergründe (Notizzettel): dunkle Schrift */
.cv-box.cv-bg-light .cv-body { color: #1c2430; }
.cv-box.cv-bg-light .cv-body a { color: #1d4ed8; }

/* ---- Kollaboration sichtbar: Live-Cursor, Live-Tinte, Edit-Pillen ---- */
.cv-collab-layer { position: absolute; inset: 0; z-index: 52; pointer-events: none; }
.cv-collab-ink {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 51; opacity: .9;
}
.cv-peer-cursor {
  position: absolute; pointer-events: none; z-index: 53;
  display: flex; align-items: center; gap: 4px;
  transform: translate(-4px, -4px); transition: left .12s linear, top .12s linear;
}
.cv-peer-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #fff; flex: none; }
.cv-peer-name {
  color: #fff; font-size: 10.5px; line-height: 1; padding: 3px 7px;
  border-radius: 999px; white-space: nowrap; opacity: .92;
}
.cv-peer-editpill {
  position: absolute; top: -22px; right: 0; z-index: 27;
  color: #fff; font-size: 10.5px; line-height: 1; padding: 3px 8px;
  border-radius: 999px; white-space: nowrap; pointer-events: none; opacity: .92;
}
.cv-peer-editpill svg.ico { width: 11px; height: 11px; vertical-align: -2px; }
body.cv-exporting .cv-collab-layer, body.cv-exporting .cv-collab-ink { display: none !important; }

/* ---- Export-Modus (?cvexport=1): nur die reine Fläche rendern ---- */
body.cv-exporting .cv-toolbar, body.cv-exporting #topbar,
body.cv-exporting #tab-strip, body.cv-exporting #sidebar,
body.cv-exporting .sync-pill,
body.cv-exporting .cv-ruler, body.cv-exporting .cv-erase-cursor { display: none !important; }
body.cv-exporting .cv-box.selected { outline: none; }