/* Zusatzstile für die Design-Pattern-Abläufe (static/apps/muster/<muster>.html) – wasdenkenkis.de, Claude Code Opus 5.5.
   Grundlage ist sortieren/rahmen.css (Farben, Knöpfe, Kästen, Code). */
:root {
  /* Rollenfarben (GoF-Rollen im Klassendiagramm und an den Objekten) */
  --r1: #dbe5fb; --r1s: #2f5bd3;
  --r2: #fde4d3; --r2s: #c2410c;
  --r3: #d8f0df; --r3s: #15803d;
  --r4: #ece0f7; --r4s: #7e3fb8;
  --r5: #fbf0c9; --r5s: #a16207;
  --r0: #ecebe6; --r0s: #6b6a64;   /* ohne Rolle, z. B. eine Exception */
}
@media (prefers-color-scheme: dark) {
  :root {
    --r1: #23304f; --r1s: #86a6ff;
    --r2: #4a2c1a; --r2s: #f0a058;
    --r3: #1d3d29; --r3s: #5fd08a;
    --r4: #362649; --r4s: #c39af0;
    --r5: #3d3412; --r5s: #e0b84a;
    --r0: #2c2c31; --r0s: #a3a3ad;
  }
}
.wrap { max-width: 1180px; }
.szenario-titel { font-size: 14px; color: var(--muted); }

/* Klassendiagramm */
.diagramm-rahmen { overflow-x: auto; }
svg.diagramm { display: block; margin: 0 auto; height: auto; }
svg.diagramm rect.klasse { stroke-width: 1.5; rx: 8; transition: stroke-width .2s, opacity .2s; }
svg.diagramm g.aktiv rect.klasse { stroke-width: 4; }
svg.diagramm g.ruhig { opacity: .55; }
svg.diagramm text { fill: var(--text); text-anchor: middle; font-family: system-ui, sans-serif; }
svg.diagramm text.name { font-size: 14px; font-weight: 700; }
svg.diagramm text.stereo, svg.diagramm text.rolle { font-size: 11px; fill: var(--muted); }
svg.diagramm text.rolle { font-style: italic; }
svg.diagramm line, svg.diagramm path { stroke: var(--grau); stroke-width: 1.5; fill: none; }
svg.diagramm .gestrichelt { stroke-dasharray: 5 4; }
svg.diagramm text.kante { font-size: 11px; fill: var(--muted); font-style: italic; }
.rolle-1 { --rf: var(--r1); --rs: var(--r1s); }
.rolle-2 { --rf: var(--r2); --rs: var(--r2s); }
.rolle-3 { --rf: var(--r3); --rs: var(--r3s); }
.rolle-4 { --rf: var(--r4); --rs: var(--r4s); }
.rolle-5 { --rf: var(--r5); --rs: var(--r5s); }
.rolle-0 { --rf: var(--r0); --rs: var(--r0s); }
svg.diagramm rect.klasse { fill: var(--rf); stroke: var(--rs); }
.legende .r { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; background: var(--rf); border: 1.5px solid var(--rs); }

/* Code links, Laufzeit rechts */
.zwei { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 820px) { .zwei { grid-template-columns: minmax(0, 1fr); } .zwei .spalte { order: -1; } }
@media (max-width: 520px) { body { padding: 8px; } .box { padding: 10px; } pre { font-size: 11.5px; } .frame, .obj { font-size: 11.5px; } }
/* schmal: Felder eines Objekts nebeneinander, sonst wird die Objektliste sehr lang (Prototype: über zehn Objekte) */
@media (max-width: 520px) { .obj { min-width: 0; } .obj .feld { display: inline; } .obj .feld + .feld::before { content: " · "; color: var(--muted); } }
#code { max-height: 560px; overflow: auto; }

/* Aufrufstapel: oberster Rahmen = gerade laufende Methode */
.rahmen-liste { display: flex; flex-direction: column; gap: 6px; }
.frame { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; }
.frame.oben { border-color: var(--cur); box-shadow: 0 0 0 1px var(--cur); }
.frame .sig { font-weight: 700; }
.frame .var { color: var(--muted); padding-left: 1em; white-space: pre-wrap; word-break: break-word; }
.frame .var b { color: var(--text); font-weight: 600; }
.leer { color: var(--muted); font-size: 13px; }

/* Objekte im Speicher */
.heap { display: flex; flex-wrap: wrap; gap: 8px; }
.obj { background: var(--rf); border: 1.5px solid var(--rs); border-radius: 8px; padding: 6px 10px; font: 12.5px/1.45 ui-monospace, Consolas, monospace; min-width: 9em; transition: opacity .25s; }
.obj .kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin: 0; }
.obj .kopf b { font-size: 13px; }
.obj .kopf small { font: italic 11px system-ui, sans-serif; color: var(--muted); }
.obj .feld { white-space: pre-wrap; word-break: break-word; }
.obj.neu { box-shadow: 0 0 0 3px var(--neu); }
.obj.cur { box-shadow: 0 0 0 3px var(--cur); }
.obj.weg { opacity: .38; }
.obj.weg .kopf small::after { content: " · nicht mehr erreichbar"; }

/* Konsole */
#konsole { padding: 8px 12px; min-height: 3.5em; white-space: pre; }
#konsole .zeile { display: block; }
#konsole .zeile.neu { background: var(--hl); }