/* Editorabmessungen bleiben beim Werkzeugwechsel stabil, breite Baeume sind zoombar. */
.learning-layout > *, .section-content, .content-block { min-width: 0; }
.material-source { color: #667078; font-size: .85rem; overflow-wrap: anywhere; }
.material-images { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; align-items: start; }
.material-images a { flex: 1 1 220px; min-width: 0; max-width: 100%; }
.material-images figure { flex: 1 1 220px; min-width: 0; max-width: 100%; margin: 0; }
.material-images figure a { flex: none; display: block; }
.material-images img { display: block; max-width: 100%; max-height: 500px; width: auto; height: auto; object-fit: contain; }
.material-note, .graph-legende { color: #54636c; font-size: .9rem; border-left: 3px solid #cbd5dd; padding-left: .7rem; margin: .8rem 0; }
.nur-fortbildung { display: none; }
.sicht-fortbildung .nur-fortbildung { display: block; }
.bild-hilfe { margin: .8rem 0; }
.bild-hilfe > summary { cursor: pointer; padding: .4rem 0; font-weight: 600; }
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.callout { background: #eef5f4; border-left: 4px solid #167c75; border-radius: 0 6px 6px 0; padding: .8rem 1rem; margin: 1rem 0; }
.callout h3 { margin-top: 0; }
.chapter-stub { background: #f6f7f9; border: 1px dashed #b7c1cb; border-radius: 6px; padding: 1rem 1.2rem; color: #54636c; }
.chapter-stub h3 { margin-top: 0; }
/* Die Word-Zeichnungsgruppe wird als SVG nachgebaut; die Kanten sind dort keine Bilder. */
.material-figure { margin: 1rem 0; }
.group-graph { display: block; width: 100%; max-width: 640px; height: auto; }
.group-edges line { stroke: #54636c; stroke-width: 4; }
.group-graph .group-node { fill: none; stroke: #293a44; stroke-width: 4; }
.drawing-editor { --editor-border: #cbd5dd; --editor-accent: #167c75; min-width: 0; }
.drawing-heading, .drawing-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .8rem; }
.drawing-status { font-size: .85rem; color: #54636c; }
.drawing-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; padding: .5rem; background: #eef2f5; border: 1px solid var(--editor-border); }
.drawing-toolbar button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #293a44; cursor: pointer; flex: 0 0 36px; }
.drawing-toolbar button:hover { background: #dce7ea; }
.drawing-toolbar button[aria-pressed="true"] { background: var(--editor-accent); color: white; }
.drawing-toolbar button:disabled { opacity: .35; cursor: default; }
.drawing-toolbar svg, .drawing-footer svg { width: 19px; height: 19px; flex: 0 0 19px; }
.drawing-modes { display: flex; border-right: 1px solid #bdc9d0; padding-right: .4rem; margin-right: .25rem; }
.drawing-toggle { display: inline-flex; gap: .35rem; align-items: center; font-size: .85rem; padding: .3rem; }
.drawing-toggle input { accent-color: var(--editor-accent); }
.drawing-frame { position: relative; border: 1px solid var(--editor-border); border-top: 0; overflow: hidden; }
.drawing-canvas { height: 420px; width: 100%; background-color: #fff; background-image: radial-gradient(#dce3e8 .8px, transparent .8px); background-size: 20px 20px; touch-action: none; }
.drawing-editor[data-kind="tree_editor"] .drawing-canvas { height: 520px; }
.drawing-editor[data-tool="node"] .drawing-canvas { cursor: crosshair; }
.drawing-editor[data-tool="edge"] .drawing-canvas { cursor: crosshair; }
.drawing-editor button:focus-visible, .drawing-canvas:focus-visible { outline: 2px solid var(--editor-accent); outline-offset: 2px; }
.edge-draft { position: absolute; height: 2px; background: var(--editor-accent); transform-origin: left center; pointer-events: none; top: 0; left: 0; }
.tree-bank { display: flex; gap: .6rem; flex-wrap: wrap; padding: .75rem; border: 1px solid var(--editor-border); border-top: 0; }
.tree-bank button { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--editor-accent); background: #fff; color: #155c57; font-weight: 700; cursor: grab; touch-action: none; }
.tree-bank button:active { cursor: grabbing; }
.tree-drag-token { position: fixed; width: 42px; height: 42px; border-radius: 50%; background: #167c75; color: white; display: grid; place-items: center; z-index: 1000; pointer-events: none; font-weight: 700; }
.drawing-inspector { display: flex; gap: 1rem; flex-wrap: wrap; padding: .75rem 0; min-height: 78px; }
.drawing-inspector label { display: flex; flex: 1 1 150px; flex-direction: column; gap: .25rem; font-size: .85rem; color: #465761; min-width: 0; }
.drawing-inspector input { width: 100%; border: 1px solid var(--editor-border); border-radius: 4px; padding: .5rem; font: inherit; }
.drawing-inspector input:disabled { background: #f1f3f5; }
.drawing-notes-label { display: block; margin-top: .75rem; font-size: .9rem; color: #465761; }
.drawing-notes { display: block; margin-top: .3rem; }
.drawing-count { font-size: .85rem; color: #54636c; }
.drawing-footer .btn { display: inline-flex; align-items: center; gap: .4rem; }
.drawing-feedback { font-size: .9rem; overflow-wrap: anywhere; }
.drawing-feedback:not(:empty) { padding: .65rem .8rem; background: #edf4f6; border-left: 3px solid #167c75; }
.drawing-feedback[data-error="true"] { background: #fff2ee; border-color: #be492e; }
.block-graph_editor, .block-tree_editor { border-left: 4px solid #167c75; }
.archived-answer { opacity: .75; }
/* Auf breiten Displays teilen Referenz und Baum denselben Arbeitsbereich. */
.tree-workspace { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 1rem; align-items: start; }
.tree-workspace:has(.tree-reference:not([open])) { grid-template-columns: auto minmax(0, 1fr); }
.tree-reference { padding: .5rem; border: 1px solid #cbd5dd; background: #fff; }
.tree-reference summary { cursor: pointer; font-weight: 600; padding: .4rem; }
.tree-reference img { width: 100%; max-height: 480px; object-fit: contain; display: block; }
.path-answer fieldset { border: 1px solid #cbd5dd; padding: .75rem; display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.path-answer legend { padding: 0 .3rem; font-weight: 600; }
.path-answer label { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 0; }
.path-answer input { min-width: 0; width: 100%; padding: .5rem; border: 1px solid #aebcc5; border-radius: 4px; font: inherit; }
.path-feedback { margin-top: .75rem; }
@media (max-width: 1000px) {
  .tree-workspace, .tree-workspace:has(.tree-reference:not([open])) { grid-template-columns: minmax(0, 1fr); }
  .tree-reference img { max-height: 260px; }
}
/* Im einspaltigen Layout darf die Kapitelnavigation keine Aufgabenwerkzeuge verdecken. */
@media (max-width: 768px) {
  .learning-layout .section-nav { position: static; max-height: none; overflow-y: visible; }
}
@media (max-width: 600px) {
  .block-graph_editor, .block-tree_editor { padding: .75rem; }
  .drawing-canvas { height: 360px; }
  .drawing-editor[data-kind="tree_editor"] .drawing-canvas { height: 440px; }
  .drawing-toolbar { gap: .2rem; }
}

/* Hintergrundvorlage, einblendbare Aufgabe und Vollbild */
.drawing-frame.has-background { background: #fff; }
.drawing-frame.has-background .drawing-canvas { background-color: transparent; background-image: none; position: relative; z-index: 1; }
.drawing-background { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; user-select: none; max-width: none; z-index: 0; }
.drawing-background[hidden] { display: none; }
.drawing-opacity { width: 90px; accent-color: var(--editor-accent); }
.drawing-task { position: absolute; z-index: 3; top: .5rem; left: .5rem; max-width: min(460px, 70%); max-height: calc(100% - 1rem);
  overflow: auto; background: rgba(255, 255, 255, .97); border: 1px solid var(--editor-border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18); padding: .75rem 2rem .75rem 1rem; font-size: .95rem; }
.drawing-task[hidden] { display: none; }
.drawing-task img, .drawing-task svg { max-width: 100%; height: auto; }
.drawing-task-close { position: absolute; top: .25rem; right: .35rem; border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #475569; }
.drawing-editor:fullscreen, .drawing-editor.is-fullscreen { background: #fff; padding: .75rem; display: flex; flex-direction: column; overflow: auto; }
.drawing-editor.is-fullscreen { position: fixed; inset: 0; z-index: 1000; }
.drawing-editor:fullscreen .drawing-frame, .drawing-editor.is-fullscreen .drawing-frame { flex: 1 1 auto; min-height: 300px; }
.drawing-editor:fullscreen .drawing-canvas, .drawing-editor.is-fullscreen .drawing-canvas { height: 100%; min-height: 300px; }
/* Hilfe-Rundgang (graph-editor.js: rundgang) */
.drawing-toolbar button.drawing-hilfe { width: auto; flex: 0 0 auto; margin-left: auto; padding: 0 .6rem; gap: .3rem; font-weight: 600;
  border: 1px solid var(--editor-accent); color: var(--editor-accent); background: #fff; }
.drawing-toolbar button.drawing-hilfe:hover { background: #e6f4f2; }
.tour-hervor { outline: 3px solid #f97316 !important; outline-offset: 2px; position: relative; z-index: 5;
  animation: tour-puls 1.4s ease-in-out infinite; }
@keyframes tour-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .55); } 50% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); } }
.editor-tour { position: fixed; z-index: 1100; width: min(340px, calc(100vw - 16px)); background: #fff; color: #0f172a;
  border: 2px solid #f97316; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .25); padding: .6rem .8rem .7rem; }
.editor-tour p { margin: .3rem 0 .6rem; font-size: 1rem; line-height: 1.4; }
.editor-tour-kopf { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: #c2410c; font-weight: 700; }
.editor-tour-zu { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; width: 36px; height: 36px; cursor: pointer; color: #475569; }
.editor-tour-knoepfe { display: flex; justify-content: flex-end; gap: .5rem; }
@media (prefers-reduced-motion: reduce) { .tour-hervor { animation: none; } }
.drawing-canvas.tour-hervor, .tree-reference.tour-hervor { outline-offset: -4px; }