/* Blockeditor: Griff und Plus am Rand, Text wie gerendert, Rohtext nur im fokussierten Block. */
.blocks-editor { display: block; padding: var(--s-4) var(--s-4) var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-1); min-height: 20rem; }
.blocks-editor[hidden] { display: none; }
.editor-form.blocks-an .editor-toolbar > button:not(#editor_blocks_button) { display: none; }

.blk { position: relative; display: flex; align-items: flex-start; gap: var(--s-1); padding: 2px 0; border-radius: var(--r-2); }
.blk-tools { position: absolute; left: calc(-1 * var(--s-6)); top: 2px; display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.blk:hover .blk-tools, .blk.fokus .blk-tools, .blk:focus-within .blk-tools { opacity: 1; }
.blk-plus, .blk-grip { width: 16px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--fg-subtle); font-size: var(--fs-base); line-height: 1; cursor: pointer; border-radius: var(--r-1); }
.blk-grip { cursor: grab; letter-spacing: -2px; }
.blk-plus:hover, .blk-grip:hover { background: var(--surface-4); color: var(--fg); }
.blk.zieht { opacity: 0.4; }
.blk.drop-vor { box-shadow: 0 -2px 0 0 var(--accent); }
.blk.drop-nach { box-shadow: 0 2px 0 0 var(--accent); }

.blk-body { display: flex; align-items: flex-start; gap: var(--s-2); flex: 1; min-width: 0; }
.blk-inhalt { flex: 1; min-width: 0; position: relative; }
.blk-view, .blk-ta { display: block; width: 100%; margin: 0; padding: 2px var(--s-1); border: 0; background: transparent; color: var(--fg); font: inherit; font-size: var(--fs-md); line-height: 1.55; overflow-wrap: anywhere; box-sizing: border-box; }
.blk-view { min-height: 1.55em; cursor: text; white-space: normal; }
.blk-ta { resize: none; overflow: hidden; outline: none; border-radius: var(--r-1); background: var(--surface-2); }
.blk:not(.fokus) .blk-ta:not(.blk-roh) { display: none; }
.blk.fokus .blk-view { display: none; }
.blk-leer { color: var(--fg-subtle); }
.blk-view code, .blk-ta.blk-roh { font-family: var(--font-mono); font-size: var(--fs-base); }
.blk-view code { padding: 0 var(--s-1); border-radius: var(--r-1); background: var(--surface-3); }
.blk-wl { color: var(--accent); }
.blk-link { color: var(--accent); text-decoration: underline; }
.blk-emb { display: inline-block; padding: 0 var(--s-2); border-radius: var(--r-1); background: var(--surface-3); color: var(--fg-muted); font-size: var(--fs-sm); }

.blk-h1 .blk-view, .blk-h1 .blk-ta { font-size: var(--fs-2xl); font-weight: 700; color: var(--fg-strong); line-height: 1.25; }
.blk-h2 .blk-view, .blk-h2 .blk-ta { font-size: var(--fs-xl); font-weight: 650; color: var(--fg-strong); line-height: 1.3; }
.blk-h3 .blk-view, .blk-h3 .blk-ta { font-size: var(--fs-lg); font-weight: 600; color: var(--fg-strong); }
.blk-h1, .blk-h2, .blk-h3 { margin-top: var(--s-3); }

.blk-marker { flex: none; min-width: 1.1em; color: var(--fg-muted); text-align: center; line-height: 1.55; font-size: var(--fs-md); }
.blk-num { min-width: 1.6em; text-align: right; }
.blk-check { flex: none; margin: 5px 0 0; accent-color: var(--accent); }
.blk-todo.erledigt .blk-view, .blk-todo.erledigt .blk-ta { color: var(--fg-subtle); text-decoration: line-through; }

.blk-quote .blk-body { border-left: 3px solid var(--accent-border); padding-left: var(--s-3); }
.blk-quote .blk-view, .blk-quote .blk-ta { color: var(--fg-muted); }

.blk-code .blk-inhalt, .blk-raw .blk-inhalt { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
.blk-code .blk-ta, .blk-raw .blk-ta { background: transparent; padding: var(--s-2) var(--s-3); white-space: pre; overflow-x: auto; }
.blk-lang { position: absolute; top: var(--s-1); right: var(--s-2); width: 7rem; padding: 0 var(--s-1); border: 0; border-radius: var(--r-1); background: var(--surface-3); color: var(--fg-muted); font-size: var(--fs-micro); text-align: right; }

.blk-hr .blk-body, .blk-body.blk-hr { padding: var(--s-2) 0; outline: none; }
.blk-hr hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--line); }
.blk-hr:focus hr { border-top-color: var(--accent); }

.blk-menu { z-index: 60; }

/* Touch: ohne Zeigen gibt es kein Hover - Griff und Plus bleiben dezent sichtbar. */
@media (hover: none) { .blk-tools { opacity: 0.55; } }

.blk.versteckt { display: none; }
.blk-fold { width: 16px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--fg-subtle); font-size: var(--fs-sm); cursor: pointer; border-radius: var(--r-1); }
.blk-fold:hover { background: var(--surface-4); color: var(--fg); }
.blk.zu .blk-tools { opacity: 1; }
.blk.zu .blk-marker::after { content: " …"; color: var(--fg-subtle); }

/* Tabellen-Raster und Formel-Vorschau im Blockeditor */
.blk-tabelle { width: 100%; }
.blk-tabelle-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-1); }
.blk-tabelle-grid { border-collapse: collapse; width: 100%; }
.blk-tabelle-grid th, .blk-tabelle-grid td { border: 1px solid var(--line); padding: 0; min-width: 7rem; }
.blk-tabelle-grid th { background: var(--surface-3); }
.blk-tabelle-grid input { width: 100%; border: 0; background: transparent; color: var(--fg); padding: var(--s-2) var(--s-3); font: inherit; outline: none; }
.blk-tabelle-grid th input { font-weight: 600; }
.blk-tabelle-grid input:focus { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.blk-tabelle-leiste { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); opacity: 0; transition: opacity var(--dur) var(--ease); }
.blk:hover .blk-tabelle-leiste, .blk:focus-within .blk-tabelle-leiste { opacity: 1; }
@media (hover: none) { .blk-tabelle-leiste { opacity: 1; } }
.blk-mathe-vorschau { margin: var(--s-2) 0 0; padding: var(--s-2) var(--s-3); border-top: 1px dashed var(--line); }
.blk-math .blk-inhalt { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface-2); }
.blk-math .blk-ta { background: transparent; padding: var(--s-2) var(--s-3); white-space: pre; font-family: var(--font-mono); }

/* Rahmenauswahl */
.blk.gewaehlt { background: var(--accent-soft); border-radius: var(--r-2); outline: 1px solid var(--accent-border); }
.auswahl-rahmen { position: fixed; z-index: 80; pointer-events: none; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--r-1); }
.blocks-editor { user-select: none; }
.blocks-editor textarea, .blocks-editor input { user-select: text; }