/* Slide Bausteine: die Kette oben, das Ergebnis darunter. Grosser Bildschirm,
   keine Handyansicht. Keine Farbfuellung ausser der Einordnung als Agent. */

.bausteinbody { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }

/* Die Leinwand. Die Kaesten liegen absolut darin und werden ueber transform
   bewegt; die Kanten liegen als SVG darueber und lassen Klicks durch, ausser
   auf dem Strich selbst. */
.leinwand { position: relative; flex: 0 0 400px; border: 1px solid var(--color-border); background: var(--color-bg-secondary); overflow: auto; }
.leinwand .kanten { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.leinwand .kante, .leinwand .vorschau, .leinwand .spitze { fill: none; stroke-width: 2; }
.leinwand .kante { stroke: var(--color-primary); pointer-events: stroke; cursor: pointer; }
.leinwand .spitze { stroke: var(--color-primary); }
.leinwand .vorschau { stroke: var(--color-text-muted); stroke-dasharray: 5 4; }

.knoten { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: .25em; border: 1px solid var(--color-text-primary); padding: var(--space-3); background: var(--color-surface); cursor: grab; user-select: none; touch-action: none; }
.knoten .name { font-weight: 700; font-size: clamp(.78rem, .95vw, 1rem); color: var(--color-text-primary); }
.knoten small { font-size: clamp(.62rem, .74vw, .8rem); color: var(--color-text-secondary); }
.knoten select { margin-top: auto; font: inherit; font-size: clamp(.65rem, .78vw, .86rem); padding: .3em .2em; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary); max-width: 100%; cursor: pointer; }

.anschluss { position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--color-primary); border-radius: 50%; background: var(--color-surface); cursor: crosshair; }
.anschluss.ein { left: -8px; }
.anschluss.aus { right: -8px; background: var(--color-primary); }

.bausteinbody .hinweis { margin: 0; min-height: 1.3em; font-size: clamp(.75rem, .9vw, .95rem); color: #b02a37; }

.ergebnis { flex: none; display: flex; flex-direction: column; gap: var(--space-3); }

.ergebnis .bedienung { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ergebnis button { font: inherit; font-size: clamp(.75rem, .9vw, .95rem); padding: .35em .8em; border: 1px solid var(--color-text-primary); background: var(--color-surface); color: var(--color-text-primary); cursor: pointer; }

.ergebnis .treffer { min-height: 1.4em; }
.ergebnis .treffer p { margin: 0; font-size: clamp(.85rem, 1.05vw, 1.15rem); }
.ergebnis .treffer .laeuft { font-weight: 700; color: var(--color-text-primary); }
.ergebnis .treffer .laeuft a { color: var(--color-primary); }
.ergebnis .treffer .fast { color: var(--color-text-secondary); }
.ergebnis select { font: inherit; font-size: clamp(.75rem, .9vw, .95rem); padding: .35em .6em; border: 1px solid var(--color-text-primary); background: var(--color-surface); color: var(--color-text-primary); }

.ergebnis .uebersicht { font-size: clamp(.75rem, .9vw, .95rem); color: var(--color-primary); }

.einordnung { margin: 0; font-size: clamp(.9rem, 1.15vw, 1.25rem); font-weight: 700; color: var(--color-text-primary); }
.einordnung.agent { color: #b02a37; }

.bedarf { display: grid; grid-template-columns: 12ch 1fr; gap: .2em var(--space-4); margin: 0; }
.bedarf dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 700; }
.bedarf dd { margin: 0; font-size: clamp(.78rem, .95vw, 1.02rem); color: var(--color-text-primary); }

.komponenten { flex: 1; min-height: 0; width: 100%; border-collapse: collapse; font-size: clamp(.7rem, .85vw, .95rem); }
.komponenten :is(th, td) { text-align: left; vertical-align: top; padding: .3em .8em .3em 0; border-top: 1px solid var(--color-border); }
.komponenten th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); font-weight: 700; border-top: 0; }