/* ===== 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);
}
.cv-root.cv-maxed {
  position: fixed; inset: 0; z-index: 200;
  /* 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 { padding-left: 8px; border-left: 1px solid var(--line); }
.cv-tb-spacer { flex: 1; }
.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;
}
.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; gap: 2px; border-bottom: 1px solid var(--line);
  margin: -2px 0 4px; padding-bottom: 6px;
}
.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; }

/* 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 ---- */
.cv-box {
  position: absolute; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  user-select: none;
}
.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); font-size: 13px; line-height: 1.4;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.cv-va-middle > .cv-body { justify-content: center; }
.cv-va-bottom > .cv-body { justify-content: flex-end; }
.cv-body[contenteditable="true"] {
  overflow-y: auto; overflow-x: hidden; outline: none; user-select: text; cursor: 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); }

/* ---- Resize-Griffe (8) ---- */
.cv-rh {
  position: absolute; width: 9px; height: 9px; border-radius: 2px;
  background: var(--accent); border: 1px solid var(--bg);
  display: none; z-index: 26;
}
.cv-root[data-mode="select"] .cv-box.selected > .cv-rh { display: block; }
.cv-rh-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.cv-rh-n { top: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.cv-rh-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.cv-rh-e { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.cv-rh-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.cv-rh-s { bottom: -5px; left: calc(50% - 5px); cursor: ns-resize; }
.cv-rh-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.cv-rh-w { left: -5px; top: calc(50% - 5px); 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: nativer Listen-Marker "🡪" — automatisch sauber an der
   Grundlinie ausgerichtet, eingerückt wie normale Listen. */
.cv-body ul.arrow { list-style-type: "🡪\00a0"; }
.cv-body ul.arrow > li::marker { color: var(--muted); }

/* 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-fmt-grip { padding: 0 5px; }
  .cv-fmt-grip svg.ico { width: 16px; height: 16px; }
  .cv-anchor { width: 16px; height: 16px; }
  .cv-rh { width: 14px; height: 14px; }
  /* 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: kompakte Toolbar (max. 2 Zeilen) ---- */
@media (max-width: 768px) {
  .cv-toolbar { gap: 4px; padding: 4px 6px; }
  .cv-tb-group + .cv-tb-group { padding-left: 4px; }
  .cv-tb-btn { padding: 5px 6px; min-width: 26px; }
  .cv-tb-zoom { display: none; }
  .cv-tb-penwidth { width: 64px; }
}

/* 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 #mobile-fab,
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 #mobile-fab, 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; }