/* Diagramm-Layout: Farbvariablen, Boxen, Pfeile, Dunkelmodus.
 * Aus den Inline-style-Bloecken von 131 Seiten extrahiert, die alle
 * denselben Block trugen (md5 8abfec45a23d768c03e4c217f52156c3).
 * Als Datei ausgeliefert, weil die CSP style-src 'self' Inline-Styles
 * verwirft - die Bloecke waren wirkungslos. */
:root {
  --d-arrow: #21588F; --d-arrow-opacity: 0.35;
  --d-braun: #8b6845; --d-braun-bg: #f7f4f2;
  --d-rosa: #966489;  --d-rosa-bg: #f8f4f7;
  --d-orange: #b8651a; --d-orange-bg: #faf4ef;
  --d-blau: #21588F;  --d-blau-bg: #eff3f7;
  --d-gruen: #3d6911; --d-gruen-bg: #f1f4ee;
  --d-teal: #1a7a6d;  --d-teal-bg: #eff6f5;
  --d-gold: #8a7030;  --d-gold-bg: #f7f5ef;
  --d-rot: #a63d40;   --d-rot-bg: #f9f0f0;
  --d-muted: #888888; --d-muted-bg: #f7f7f7;
}
[data-theme="dark"] {
  --d-arrow: #4a7ba7; --d-arrow-opacity: 0.45;
  --d-braun: #b89878; --d-braun-bg: #33281e;
  --d-rosa: #c794bb;  --d-rosa-bg: #3d2535;
  --d-orange: #d4934e; --d-orange-bg: #3d2a1a;
  --d-blau: #4a7ba7;  --d-blau-bg: #1e2d3d;
  --d-gruen: #7db33f; --d-gruen-bg: #1f3d24;
  --d-teal: #4ab3a3;  --d-teal-bg: #1a3330;
  --d-gold: #c4a84e;  --d-gold-bg: #33301e;
  --d-rot: #e5737e;   --d-rot-bg: #3d1f23;
  --d-muted: #a8a8a8; --d-muted-bg: #2d2d2d;
}
.diagram{position:relative;width:100%;margin:var(--space-6,2rem) 0}
.diagram .d-box{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;border:1.5px solid;text-align:center;font-family:var(--font-family-sans,sans-serif);font-size:13px;font-weight:600;line-height:1.3;box-sizing:border-box;z-index:2;cursor:grab;user-select:none}
.diagram .d-box.dragging{cursor:grabbing;opacity:0.8;box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.diagram .d-sub{display:block;font-weight:400;font-size:10px;opacity:0.65;margin-top:1px}
.diagram svg.d-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
.diagram .d-box[data-color="braun"]{border-color:var(--d-braun);background:var(--d-braun-bg);color:var(--d-braun)}
.diagram .d-box[data-color="rosa"]{border-color:var(--d-rosa);background:var(--d-rosa-bg);color:var(--d-rosa)}
.diagram .d-box[data-color="orange"]{border-color:var(--d-orange);background:var(--d-orange-bg);color:var(--d-orange)}
.diagram .d-box[data-color="blau"]{border-color:var(--d-blau);background:var(--d-blau-bg);color:var(--d-blau)}
.diagram .d-box[data-color="gruen"]{border-color:var(--d-gruen);background:var(--d-gruen-bg);color:var(--d-gruen)}
.diagram .d-box[data-color="teal"]{border-color:var(--d-teal);background:var(--d-teal-bg);color:var(--d-teal)}
.diagram .d-box[data-color="gold"]{border-color:var(--d-gold);background:var(--d-gold-bg);color:var(--d-gold)}
.diagram .d-box[data-color="rot"]{border-color:var(--d-rot);background:var(--d-rot-bg);color:var(--d-rot)}
.diagram .d-box[data-color="muted"]{border-color:var(--d-muted);background:var(--d-muted-bg);color:var(--d-muted)}
.d-debug{font-family:monospace;font-size:11px;color:#999;background:#f8f8f8;border:1px solid #e0e0e0;border-radius:4px;padding:8px 12px;margin-top:4px;max-width:640px;margin-left:auto;margin-right:auto;white-space:pre;overflow-x:auto;line-height:1.6}
