/* Graphentheorie: interaktive Definition, Wege als Woerter, Matrix, Weg ablaufen (graph-aufgaben.js) */
.gdef { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; align-items: center; margin: .5rem 0 1rem; }
@media (max-width: 760px) { .gdef { grid-template-columns: 1fr; } }
.gdef-bild .gsvg { max-height: 340px; }
.gdef-zeile { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; margin: .35rem 0; overflow-wrap: anywhere; }
.gdef-teil { font-weight: 700; padding: 0 .15em; border-radius: 4px; cursor: help; border-bottom: 2px dotted #94a3b8; }
.gdef-el { border-radius: 4px; padding: 0 .1em; cursor: help; transition: background .15s, color .15s; }
.gdef-teil.hervor, .gdef-el.hervor { background: #fee2e2; color: #b91c1c; }
.gdef .gsvg-knoten-g, .gdef .gsvg-kante { cursor: help; }
.gdef-matrix { border-collapse: collapse; margin-top: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.gdef-matrix th, .gdef-matrix td { border: 1px solid #cbd5e1; padding: .25rem .55rem; text-align: center; min-width: 2rem; }
.gdef-matrix td.hervor { background: #fee2e2; color: #b91c1c; font-weight: 700; }
.graph-task-figure .gsvg, .graph-walk-figure .gsvg { max-height: 360px; margin: .5rem 0; }
.graph-words-list { margin: .5rem 0 0; padding-left: 1.5rem; }
.graph-words-list li { margin: .35rem 0; }
.graph-word { width: 14rem; max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; }
.graph-word-status { margin-left: .6rem; font-size: .9rem; }
.graph-word-status.ok { color: #15803d; font-weight: 700; }
.graph-word-status.falsch { color: #b91c1c; }
.matrix-input { border-collapse: collapse; margin: .5rem 0; }
.matrix-input th, .matrix-input td { border: 1px solid #cbd5e1; padding: 0; text-align: center; min-width: 2.4rem; }
.matrix-input th { background: #f1f5f9; padding: .25rem .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.matrix-cell { width: 2.4rem; height: 2.2rem; border: 0; background: #fff; font: 600 1rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; color: #94a3b8; }
.matrix-cell.eins { color: #0f172a; background: #dbeafe; }
.matrix-cell:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.matrix-name { width: 2.6rem; text-align: center; padding: .1rem; font-weight: 600; }
.matrix-input tr.zeile-falsch th { background: #fee2e2; color: #b91c1c; }
.graph-walk-figure { user-select: none; }
.graph-walk .gsvg-knoten-g { cursor: pointer; }
.graph-walk .gsvg-knoten-g.waehlbar .gsvg-kreis { stroke: #16a34a; stroke-width: 3; }
.graph-walk .gsvg-knoten-g.besucht .gsvg-kreis { fill: #cbd5e1; }
.graph-walk .gsvg-knoten-g.hier .gsvg-kreis { fill: #fde68a; stroke: #b45309; stroke-width: 4; }
.graph-walk .gsvg-kante.benutzt { stroke: #dc2626; stroke-width: 5; }
.graph-walk .labor-raum.besucht .gsvg-kreis { fill: #9ca3af; }
.graph-walk .labor-tuer.benutzt { fill: #dc2626; stroke: #dc2626; }
.graph-walk.mit-schachbrett .labor-raum.feld-dunkel:not(.besucht):not(.hier) .gsvg-kreis { fill: #475569; }
.graph-walk.mit-schachbrett .labor-raum.feld-dunkel text { fill: #f8fafc; }
.content-block.walk-folge-verdeckt { display: none; }
.graph-walk-pfad { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin: .25rem 0; color: #334155; }
.graph-task .block-actions [hidden] { display: none !important; }
/* Ragnaroek: die Schlange als dickes Band, gespaltene Stuecke dunkel */
.gsvg-schlange { background: #ece9f3; border-radius: 10px; }
.gsvg-schlange path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gsvg-schlange .schlange-umriss { stroke: #0c4a6e; stroke-width: 70; }
.gsvg-schlange .schlange-koerper { stroke: url(#schlange-schuppen); stroke-width: 64; }
.gsvg-schlange .schlange-riss { stroke: #1e1b4b; stroke-width: 6; stroke-dasharray: 14 6 4 6; opacity: 0; }
.gsvg-schlange .schlange-stueck.benutzt .schlange-koerper { stroke: #7dd3fc; }
.gsvg-schlange .schlange-stueck.benutzt .schlange-riss { opacity: 1; }
.gsvg-schlange .gsvg-kreis { fill: #fef3c7; stroke: #92400e; stroke-width: 3; }
.gsvg-schlange text { fill: #78350f; }
/* Definition: dickere Kanten, breite unsichtbare Trefferflaeche */
.gdef .gsvg-kante { stroke-width: 5; }
.gdef .gsvg .gsvg-kante.hervor { stroke-width: 8; }
.gsvg-treffer { stroke: transparent; stroke-width: 22; pointer-events: stroke; cursor: help; }
.gdef-teil[data-teil="G"] { font-weight: 700; }
/* V und E angeben */
.graph-mengen-felder { display: grid; grid-template-columns: max-content 1fr; gap: .5rem .6rem; align-items: start; margin: .75rem 0; }
.graph-mengen-felder label { font: 600 1.05rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding-top: .35rem; }
.graph-mengen-felder input, .graph-mengen-felder textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; width: 100%; }
.graph-mengen-figur img { display: block; max-width: 420px; width: 100%; margin: .5rem auto; }
.graph-task-feedback ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.graph-mengen-felder input { padding: .45rem .6rem; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 1rem; }
/* Weg im Merkkasten, ausklappbarer Graph */
.gsvg .gsvg-kante.gsvg-weg { stroke: #2563eb; stroke-width: 7; }
.gdef-hover { border-bottom: 2px dotted #94a3b8; cursor: help; border-radius: 3px; padding: 0 .1em; }
.gdef-hover.hervor { background: #fee2e2; color: #b91c1c; }
.gsvg .gsvg-gewicht.hervor { fill: #dc2626; font-weight: 700; font-size: 17px; }
.graph-klapp { margin: .5rem 0; border: 1px solid #cbd5e1; border-radius: 8px; padding: .4rem .8rem; background: #f8fafc; }
.graph-klapp summary { cursor: pointer; font-weight: 600; color: #334155; }
.graph-klapp .gsvg { max-height: 300px; }
/* Zuordnen per Ankreuzen */
.zuordnung-liste { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content); gap: .4rem 1.25rem; align-items: center; margin: .75rem 0; }
.zuordnung-liste .zuordnung-zeile { display: contents; }
.zuordnung-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; }
.zuordnung-karten .zuordnung-text { font-family: inherit; font-weight: 600; }
.zuordnung-wahl { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.zuordnung-option { border: 1px solid #94a3b8; background: #fff; border-radius: 999px; padding: .25rem .8rem; cursor: pointer; font-size: .95rem; }
.zuordnung-option[aria-pressed="true"] { background: #2563eb; border-color: #2563eb; color: #fff; }
.zuordnung-option:disabled { cursor: default; }
.zuordnung-liste.zuordnung-saetze { grid-template-columns: minmax(0, 1fr) max-content; gap: .5rem 1rem; }
.zuordnung-saetze .zuordnung-text { font-family: inherit; font-size: 1rem; line-height: 1.4; }
@media (max-width: 700px) { .zuordnung-liste.zuordnung-saetze { grid-template-columns: minmax(0, 1fr); }
  .zuordnung-saetze .zuordnung-wahl { margin-bottom: .5rem; } }
.zuordnung-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin: .75rem 0; }
.zuordnung-karten .zuordnung-zeile { display: flex; flex-direction: column; align-items: center; gap: .4rem; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: .6rem; background: #fff; }
.zuordnung-bild .gsvg { max-height: 190px; }
/* Gruppen in Merkkaesten: erst beim Zeigen sichtbar */
.gdef-optional { opacity: 0; transition: opacity .15s; pointer-events: none; }
.gdef-optional.sichtbar { opacity: 1; }
.gsvg-extra { stroke: #dc2626; stroke-width: 3.5; stroke-dasharray: 8 6; fill: none; }
.gsvg-notiz { font: 700 15px "Segoe UI", Arial, sans-serif; fill: #b91c1c; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.gdef-mehrere { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; }
.gdef-mehrere .graph-figure { flex: 1 1 220px; max-width: 360px; }
.gdef-mehrere .gsvg { max-height: 240px; }
.callout .gdef-bild .gsvg { max-height: 360px; }
/* Nachbarschaftsliste und "steckt in" bei Zyklen */
.graph-liste-zeilen { display: grid; gap: .4rem; margin: .75rem 0; max-width: 32rem; }
.graph-liste-zeile { display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: .5rem; font-weight: normal; }
.graph-liste-knoten { font: 700 1.05rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: right; }
.graph-liste-eingabe { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: .35rem .5rem; }
.graph-liste-zeile.zeile-falsch .graph-liste-knoten { color: #b91c1c; }
.graph-word-quellen { margin-left: .6rem; font-size: .9rem; color: #334155; white-space: nowrap; }
.graph-word-quellen label { margin-left: .35rem; font-weight: normal; }
.graph-word-quellen input { width: auto; }
.gdef-ohne-mengen { grid-template-columns: 1fr; }
.gdef-ohne-mengen .gdef-bild .gsvg { max-height: 380px; }
.gsvg-teilkante { stroke: #dc2626; stroke-width: 7; fill: none; stroke-linecap: round; }
.plan-ebene { pointer-events: none; }
.plan-strecke { stroke: #2563eb; stroke-width: 4; stroke-linecap: round; }
.plan-nummer { font-size: 12px; font-weight: 700; fill: #1d4ed8; }