/* FKB-Baukasten des TM-Blueprints (shared/lernmodul/fkb.js).
   Genutzt auf Theorieseiten (Mitmach-Moment) und in Übungsaufgaben
   (Typ fkb). Farben ausschließlich über Tokens; die Pfeilfarbe je
   Palette-Element kommt als --fkb-farbe vom Modul (Zeichenkonvention:
   eingeprägte Kräfte orange, Reaktionskräfte teal, Momente purple). */

.fkb { display: grid; gap: .6rem; margin: .4rem 0 .8rem; }
.fkb__intro { margin: 0; font-size: .92rem; color: var(--textcolor-80contrast); }

.fkb__palette { display: flex; flex-wrap: wrap; gap: .45rem; }
.fkb__chip {
  border: 1.5px solid var(--fkb-farbe, var(--surface-border));
  color: var(--textcolor-fullcontrast);
  background: var(--surface-bg);
  border-radius: var(--radius-lg, 10px);
  padding: .35rem .75rem; font-size: .92rem; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.fkb__chip:hover { background: var(--surface-hover); }
.fkb__chip.is-active {
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
  background: var(--primary-tint);
}
.fkb__chip.is-placed { opacity: .55; text-decoration: line-through; }

.fkb__svg {
  width: 100%; max-width: 34rem; height: auto; display: block;
  background: var(--surface-bg);
  border: 1px solid var(--surface-border-light);
  border-radius: var(--radius-lg, 10px);
  /* Pointer-Rotation: ohne touch-action bricht der Browser den Drag als Scroll ab */
  touch-action: none;
}
.fkb__hit:hover + .fkb__anchor { r: 7; }

.fkb__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.fkb__check, .fkb__reset {
  border: 1px solid var(--surface-border);
  background: var(--surface-bg); color: var(--textcolor-fullcontrast);
  border-radius: var(--radius-md, 8px);
  padding: .4rem .85rem; font-size: .92rem; cursor: pointer;
}
.fkb__check { border-color: rgb(var(--chart-teal-rgb)); }
.fkb__check:hover, .fkb__reset:hover { background: var(--surface-hover); }

.fkb .fkb__fb { margin: 0; }
.fkb .fkb__explanation {
  display: block;
  margin-top: var(--spacing-sm);
  color: inherit;
}
.fkb__fb { font-size: .92rem; min-height: 1.3rem; }
.fkb__fb.is-ok { color: rgb(var(--chart-teal-rgb)); }
.fkb__fb.is-err { color: rgb(var(--chart-rose-rgb)); }

/* Drag&Drop: Chip beim Ziehen + Anker-Schnapp-Highlight */
.fkb__chip { cursor: grab; }
.fkb__chip.is-dragging { opacity: .5; cursor: grabbing; }
.fkb__hit.is-dragover {
  stroke: rgba(var(--primary-rgb), 0.55);
  stroke-width: 3;
  stroke-dasharray: 4 3;
}

/* Sicherheitsnetz: minimal überstehende Beschriftungen an Bildrändern
   werden nicht abgeschnitten (die Pfeillänge klemmt bereits in fkb.js). */
.fkb__svg { overflow: visible; }

/* Schnittstelle wählen (Betreiber-Wunsch 2026-08-05): erst entscheiden,
   wo geschnitten wird, dann Kräfte antragen. Die Kandidaten pulsieren
   dezent, der gewählte Rundschnitt bleibt danach stehen. */
.fkb__cut {
  border-left: 3px solid rgb(var(--chart-teal-rgb));
  padding: .1rem 0 .1rem .7rem;
  display: grid; gap: .2rem;
}
.fkb__cut-q { font-size: .95rem; }
.fkb__cut-fb { font-size: .92rem; min-height: 1.2rem; }
/* Zwei Klassen, nicht eine: `.scrolly-step p` (0,1,1) schlägt ein einfaches
   `.fkb__cut-q { margin: 0 }` (0,1,0) still — dieselbe Spezifitäts-Falle wie
   in Style Guide §4.6a. Der teal Rand lief dadurch rund 50 px über den Text
   hinaus (Betreiber-Befund 2026-08-21). */
.fkb__cut .fkb__cut-q, .fkb__cut .fkb__cut-fb { margin: 0; }
/* Solange keine Rückmeldung dasteht, reserviert die Zeile keine Höhe. Der
   Sprung beim Erscheinen ist eine Zeile — der dauerhaft zu lange Rand war
   das größere Übel. */
.fkb__cut-fb:empty, .fkb__fb:empty { display: none; }
.fkb__cut-fb.is-ok { color: rgb(var(--chart-teal-rgb)); }
.fkb__cut-fb.is-err { color: rgb(var(--chart-rose-rgb)); }
.fkb__palette[hidden], .fkb__row[hidden], .fkb__intro[hidden],
.fkb__reverse[hidden] { display: none; }
/* Die Bauteil-Kandidaten der Schnittwahl gehören in ihre Szene. Eingebettet
   auf der Bühne blieben sie in ALLEN Kapiteln stehen — in Kapitel 01 als
   Vorwegnahme der Aufgabe, im Raumkapitel als Balken quer durch das
   räumliche Bild (Review 2026-08-21). Gesetzte Pfeile bleiben sichtbar. */
.fkb__svg--mount:not(.is-aktiv) .fkb__koerper { display: none; }
/* Dasselbe für die gesetzten Pfeile: Ab dem nächsten Kapitel zeichnet die
   Bühne die Kräfte selbst — maßstäblich und in den Richtungen, die im
   Freikörperbild angenommen wurden. Blieb das Overlay stehen, stand jede
   Kraft doppelt im Bild, einmal schematisch und einmal maßstäblich
   (Betreiber-Befund 2026-08-21). */
.fkb__svg--mount:not(.is-aktiv) [data-fkb-placed] { display: none; }
/* Ebenso die Ablageziele und ihre Trefferkreise: Ohne Schnittwahl
   werden sie sofort gezeichnet und stünden sonst in JEDEM Kapitel im
   Bild (Befund 2026-08-21 am neuen Baukasten in Modul 4). */
.fkb__svg--mount:not(.is-aktiv) .fkb__slot,
.fkb__svg--mount:not(.is-aktiv) .fkb__hit { display: none; }
.fkb__chip:disabled, .fkb__check:disabled, .fkb__reset:disabled {
  opacity: .45; cursor: not-allowed;
}
.fkb__wahl {
  stroke: rgba(var(--primary-rgb), 0.75) !important;
  stroke-width: 2 !important;
  animation: fkb-puls 1.8s ease-in-out infinite;
}
.fkb__hit:hover + .fkb__wahl { stroke-width: 3 !important; }
@keyframes fkb-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .fkb__wahl { animation: none; }
}

/* Körperwahl (Modul 2): Der Schnitt trennt kein Punkt, sondern ein
   Bauteil heraus. Die Kandidaten pulsen wie die Wahlringe — dieselbe
   Einladung, nur an einem Linienzug statt an einem Punkt. */
.fkb__koerper-linie {
  stroke: rgba(var(--primary-rgb), 0.7) !important;
  animation: fkb-puls 1.8s ease-in-out infinite;
}
.fkb__koerper:hover .fkb__koerper-linie {
  opacity: .85 !important;
  stroke-dasharray: none;
}
@media (prefers-reduced-motion: reduce) {
  .fkb__koerper-linie { animation: none; }
}

/* Pfeil-Beschriftungen lesbar über Linien/Spitzen (weißer Konturzug) */
.fkb__arrow-label, .fkb__anchor-label {
  paint-order: stroke;
  stroke: var(--surface-bg, #fff);
  stroke-width: 3px;
}